CSS高度百分比规范

我试图给我的网站设置一个适合屏幕的应用程序，但是我遇到了一些问题，我知道CSS在基本方面的来龙去脉，但是我有点困惑使用百分比。我需要一个标题（50像素），然后我需要一个盒子（高度100％），然后是一个小盒子页脚（20像素），但是这一切都需要在屏幕上没有溢出，当我尝试与给定的代码我得到一个溢出，因为100％的项目将页脚压下导致溢出滚动条。CSS高度百分比规范

<div id="holder"> <-- this is set to 100% width & height as well as html, body 

    <div id="header"> 

    </div> 

      <div id="inner_holder"> <-- This is the holder which is 100% 

      </div> 

    <div id="footer"> 

    <div/> 

</div>

来源

2011-07-28 Aiden Ryan

听起来像你需要Google css +粘性页脚？ – FiveTools

您可以使用CSS position属性将页脚定位在底部。因此，您的inner_holder div元素可自动使用剩余空间。

<html> 
<head> 
<title>SO</title> 
<style type="text/css"> 
body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

div#holder { 
    height: 100%; 
    background: lightblue; 
} 

div#header { 
    height: 50px; 
    background: #800000; 
} 

div#inner_holder { 
    background: lightblue; 
} 

div#footer { 
    height: 20px; 
    width: 100%; 
    background: #800000; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 
</style> 
</head> 
<body> 
<div id="holder"> 

    <div id="header"> 
    Header 
    </div> 

    <div id="inner_holder"> 
    Inner holder 
    </div> 

    <div id="footer"> 
    Footer 
    </div> 

</div> 
</body> 
</html>

来源

2011-07-28 01:30:03

我的建议是不要试图使inner_holder任何固定的高度。按照正常高度固定标题。使用left和bottom位置为0的固定高度绝对定位页脚。让内容正常流动，无需修改。如果需要滚动条，浏览器将适应。如果您需要背景颜色或图像，只需将它们应用到body。

来源

2011-07-28 01:05:51 Tak

CSS高度百分比规范

回答

相关问题