Question

我正在尝试为我的网站设置一个适合屏幕的应用程序，但是我遇到了一些问题，我知道基础知识方面的CSS的来龙去脉，但是在使用百分比时我有点困惑。

我需要一个标题（50px），然后我需要一个盒子（高度100％）然后一个小盒子页脚（20px），但这一切都需要在屏幕上没有溢出，当我尝试使用给定的代码我得到一个溢出因为100％项目将页脚向下推动导致溢出滚动条。

<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>

Answer 1

您可以使用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>

Answer 2

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

CSS高度百分比规范

2 个答案: