Question

我有两个部分，左边的结果和右边的主要部分，它们位于html＆gt;包装器＆gt;容器

现在，这两者的高度都不是修复，并且希望它们根据其内容延伸到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>

Answer 1

尝试在position属性中使用“absolute”而不是“relative”。我在这里工作过。

例如：

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

拥抱，维尼。

Answer 2

在许多情况下，当一个人说高度应该是100％但是你需要问“100％的什么？”时会出现问题。那个答案是那个元素的父母，所以下一个问题是，“父母的身高设置为什么？”。如果你没有为父母设置一个高度，那么100％什么都不是。

身高不会达到100％

2 个答案: