高度不会达到100％

我有两个部分，左侧的结果和右侧的主要部分驻留在html> wrapper>容器中。高度不会达到100％

现在，这两个高度都不是固定的，并希望它们根据其内容伸展到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>

来源

2013-04-09 user1038814

也发布您的HTML。 – dfsq 2013-04-09 17:46:43

所以你想要两列是相同的大小？如果是这样，尝试添加'overflow：auto'到'＃Wrapper' – Justin 2013-04-09 17:47:33

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

例如：

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

拥抱，维尼。

来源

2013-04-09 17:54:59

嗨Vinicus，谢谢，但如果我这样做，主要部分位于结果部分顶部:( – user1038814 2013-04-09 17:57:01

说实话，我不知道如果存在以这种方式“强制”高度属性的方法，为什么你可以做100％的div？试试看你的页面设计，以便更好地适应元素，所以，祝你好运。 – 2013-04-09 18:40:55

在许多情况下，如果您指出身高应为100％，但您需要提出“100％是什么？”这个问题，就会出现问题。答案是该元素的父母，因此下一个问题是“父母的身高设置为多少？”。如果你没有设置父母的身高，那么100％没有任何东西。

来源

2013-04-09 17:57:21 Rob

高度不会达到100％

回答

相关问题