我正在构建一个 3 栏布局网站。 header
将固定在顶部,nav
将固定在左侧。然后包装器将包含 main
和 aside
。我想要的是 main 和 side 可以填满包装器的高度。
这是我的 CSS。你也可以看我的jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
z-index: 9;
background: red;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0;
background: green;
}
.wrapper {
width: 80%;
min-height: 100%;
margin-top: 100px;
margin-left: 20%;
position: relative;
}
.main {
width: 70%;
min-height: 100%;
position: absolute;
left: 0;
background: black;
}
.aside {
width: 30%;
min-height: 100%;
position: absolute;
right: 0;
background: blue;
}
.u-color-white {
color: white;
}
看起来他们可以很好地工作。但是当 main
或 aside
中的内容高度超过其自高度度时,它将不起作用。我不知道如何解决它。
有人可以帮助我吗? 谢谢!
最佳答案
你的布局非常严格。一切都已定.. 如果您需要将标题高度从 100px 更改为 120 该怎么办?您必须在很多不同的地方相应地更改它。
这是针对您的布局的纯 CSS 解决方案,无需固定任何高度或宽度。 (如果愿意,您可以固定高度或宽度) 这种布局是完全响应式的,并且跨浏览器。
如果您不固定元素的高度/宽度,它们将完全满足其需要的范围。
这是一个Working Fiddle
HTML:
<header class="Header"></header>
<div class="HeightTaker">
<div class="Wrapper">
<nav class="Nav"></nav>
<div class="ContentArea">
<div class="Table">
<div class="Main"></div>
<div class="Aside"></div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body:before {
content:'';
height: 100%;
float: left;
}
.Header {
height: 100px;
/*No need to fix it*/
background-color: red;
}
.HeightTaker {
position: relative;
}
.HeightTaker:after {
content:'';
display: block;
clear: both;
}
.Wrapper {
position: absolute;
width: 100%;
height:100%;
}
.Nav {
height: 100%;
float: left;
background-color: green;
}
.ContentArea {
overflow: auto;
height: 100%;
}
.Table {
display: table;
width: 100%;
height: 100%;
}
.Main {
width: 70%;
/*No need to fix it*/
background-color: black;
display: table-cell;
}
.Aside {
width: 30%;
/*No need to fix it*/
background-color: black;
display: table-cell;
background-color: blue;
}
.u-color-white {
color: white;
}
关于html - 内容溢出时高度(最小高度)100%不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19336508/