我有两个部分，左边的结果和右边的主要部分位于 html > wrapper > container 中。
现在，这两个的高度都不是固定的，并且希望它们根据它们的内容拉伸(stretch)到 100%。在某些情况下，结果比 main 长，反之亦然。我使用了 100% 高度，但它似乎不起作用。请帮忙!
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
width: 100%;
}
#container {
width: 1007px;
padding: 130px 0 0 0;
display: block;
}
.results {
width: 383px;
float: left;
background:
#fff;
display: block;
-webkit-box-shadow: -2px 0px 8px -6px #000;
-moz-box-shadow: -2px 0px 8px -6px #000;
box-shadow: -2px 0px 8px -6px #000;
padding-bottom: 60px;
}
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: relative;
background: url(images/pattern.png) repeat;
height: 100%;
bottom: 0px;
}
<html lang="en>
<head></head>
<body>
<div id="wrapper">
<div id="container" class="clear fix">
<section class="results">
</section>
<section class="main">
</section>
</div>
</div>
</body>
</html>
最佳答案
尝试在位置属性中使用“绝对”而不是“相对”。 我在这里工作。
例如:
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: absolute;
background: url(images/pattern.png) repeat;
height: 100%;
bottom: 0px;
}
拥抱， 维尼修斯。
关于html - 高度没有达到 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15908872/