我有以下布局:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="lbme-wrapper">
<div class="header-1 lbme-row">
<div class="col-left">
</div>
<div class="col-middle">
</div>
</div>
<div class="header-2 lbme-row">
<div class="col-left">
</div>
<div class="col-middle">
</div>
<div class="col-right">
</div>
</div>
<div class="lbme-nav-container lbme-row">
<div class="col-left">
</div>
<div class="col-middle">
<nav class="navbar navbar-lbme">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="col-right">
</div>
</div>
<div class="content-row lbme-row">
<div class="col-left ">
<ul class="nav nav-stacked nav-stacked-lbme">
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div>
<div class="col-middle">
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-right hidden-xs">
</div>
</div>
<footer class="lbme-row">
<div class="col-left ">
</div>
<div class="col-middle">
1 Besucher online
</div>
<div class="col-right">
</div>
</footer>
</div>
</body>
</html>
</body>
</html>
和 CSS 文件:
html,body{ margin:0; padding:0; height:100%; width:100%; }
.lbme-wrapper {
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
overflow: hidden;
position: fixed;
border: 1px red solid;
}
.content-row {
height: 100%
}
.content-row .col-right, .content-row .col-middle,.content-row .col-left {
height: 100%;
table-layout: fixed;
}
.header-2 {
height: 100px;
}
.lbme-nav-container {
height: 94px !important;
}
.lbme-row{
display: table;
width:100%;
}
.lbme-row .col-right, .lbme-row .col-left, .lbme-row .col-middle {
display:table-cell;
border:0;
}
.col-middle {
background: gray;
}
.lbme-row .col-right, .lbme-row .col-left {
width:160px;
background: #eee;
}
.navbar-container .col-left {
height: 94px;
}
.navbar-lbme {
margin: 0;
}
.navbar-lbme .navbar-nav > li > a{
width: 86px;
height: 86px;
color: #000;
font-weight: bold;
padding: 4px;
}
.nav-stacked-lbme > li > a {
padding: 2px 0 2px 3px;
margin-left: 10px;
}
.nav-stacked-lbme > li > a:hover {
background: #aaa;
}
footer {
background: #eee;
position: absolute;
bottom: 0;
left: 0;
}
.content-row .col-middle {
overflow-y: scroll;
}
我的问题是，为什么我不能在 .content-row .col-middle 中滚动？
我已经尝试了所有溢出值到 .content-row .col-middle。这个问题是因为 table-layout: fixed; 还是 poistion: fixed？
最佳答案
您应该从 lbme-wrapper 中删除 overflow: hidden 属性，因为这是您的表所在的固定定位包装器。将其更改为 overflow: scroll 或 overflow: auto 即可。
.lbme-wrapper {
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
position: fixed;
border: 1px red solid;
overflow: scroll;
}
这是您的工作 fiddle :http://jsfiddle.net/31szb689/
关于html - 使内容在 css 表格布局中可滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29082277/