0

我有两个部分，左侧的结果和右侧的 main 位于 html > wrapper > container 中。

现在，这两个的高度都不是固定的，并且希望它们根据它们的内容拉伸到 100%。在某些情况下，结果比主要结果长，反之亦然。我已经使用了 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>
4

2 回答 2

0

尝试在位置属性中使用“绝对”而不是“相对”。我在这里工作过。

例如：

.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: absolute;
background: url(images/pattern.png) repeat;
height: 100%;
bottom: 0px;
}

拥抱，维尼修斯。

于 2013-04-09T17:54:59.363 回答
0

在许多情况下，当一个人声明高度应该是 100% 但您需要问“100% 是什么？”时，就会出现问题。该答案是该元素的父元素，因此下一个问题是“父元素的高度设置为多少？”。如果您没有为父级设置高度，那么 100% 的空无是空的。

于 2013-04-09T17:57:21.650 回答