HTML divs：自动高度和溢出：自动？

我想设计一个网站，其中包括一个内容区溢出：自动和动态高度。优选地，我希望能够将顶部和底部放在溢出下方：auto div，并让该div占据剩余空间，但到目前为止这已证明很困难。高度：自动不起作用，溢出：自动需要一个高度，所以我不能不设置它。有任何想法吗？我的代码可以在这里找到：http://abbottconstruct.com/wp-content/themes/abbott/index.html HTML divs：自动高度和溢出：自动？

感谢任何人的帮助。

来源

2010-09-13 Smartboy

你是什么动力高度呢？ – Tgr 2010-09-13 00:40:43

您是否试图使页眉和页脚始终可见，如卡在屏幕上？试试位置固定。如果您只是希望页脚位于页面的底部，无论视口有多高，请参阅http://ryanfait.com/sticky-footer/ – Keyo 2010-09-13 01:26:51

为了使CSS百分比高度起作用，元素的父级必须定义高度。因此，我们可以用下面的标记做：

<body>  
    <div id="content"> 
     <div id="header">Header</div> 
     <div id="text"> 
      Text content of your page 
     </div> 
    </div> 
    <div id="footer">Footer</div>  
</body>

所有除页脚中的网站的内容包含在#content元素。这然后使用min-height: 100%声明始终至少是其父项高度的100％。由于它的父母是身体并且有身高声明，所以这可以按预期工作。

最后，页脚被带入一个负边距的视图中，填充底部被添加到#text元素，因此其内容不会意外重叠。

的CSS如下：

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

#content { 
    min-height: 100%; 
    /* IE6 will need height: 100% defined in an IE6 only stylesheet */ 
} 

#header, #footer { 
    height: 100px; 
}  

/* Bring the footer into view */ 
#footer { 
    margin-top: -100px;  /* footer's height */ 
} 

/* Make sure footer doesn't overlap #text element */ 
#text { 
    padding-bottom: 100px; /* footer's height */ 
}

你可以看到它in action here。如果添加更多填充文字，您会看到页脚正确地被压下。

来源

2010-09-13 00:56:38 Pat

这不是我遇到问题的百分比高度。我希望可以调整内容分区的大小以自动填充两个侧边栏和页眉和页脚之间的空间。在我的页面上，您可以看到div被推到白色和侧边栏停止的位置，而我希望它与这些位置相同。我曾尝试添加填充，但它不起作用，实际上它只是将白色和侧边栏推得更远。负填充什么都不做，也没有添加空白。任何其他想法？ :) – Smartboy 2010-09-13 03:13:30