Question

我有以下HTML代码：

<html>
    <BODY>
        <DIV ID="holder">
            <DIV ID="head_area">HEAD CONTENT GOES HERE....</DIV>
            <DIV ID="main_area">BODY CONTENT GOES HERE</DIV>
            <DIV ID="foot_area">FOOT CONTENT GOES HERE...<>
        </DIV>
    </BODY>
</HTML>

应用于此脚本的CSS如下：

#holder{
    height:100%;
    padding:0px;
    margin:0px;
    border:0px;
}
#head_area{
    height:45px;
}
#main_area{
    height:???;            /*Set such that its height adjusts itself to occupy rest pixels of view prt browser pane leftover after placing '#head_area' & '#foot_area' (i.e. height = total height of pane in px - (45px + 20px)*/
    overflow:scroll;
}
#foot_area{
    height:20px;
}

在#main_area＆amp;放置#head_area之后，我应该怎么做才能将#foot_area高度设置为占用剩余空间，屏幕分辨率无关#head_area就位......换句话说，#foot_area＆amp; {{1}}在默认情况下始终可见，但在缩放时（'ctrl'+'+'）它应该像往常一样移出窗格...

...谢谢

Answer 1

使用 calc()

height:calc(100% - 65px);

来自：https://developer.mozilla.org/en-US/docs/Web/CSS/calc

的备注

注意：+和 - 运算符必须始终用空格包围。

Answer 2

由于父容器没有设置高度，因此100％的高度不会按照您希望的方式工作。您可以将html和body设置为高度：100％，然后按建议使用calc，但是您需要为不支持calc的旧浏览器提供回退。

您可以使用JavaScript查找窗口高度，然后将#main_area的高度调整为等于测量值减去#head_area和#foot_area的高度。您需要在页面加载，窗口大小调整和方向更改上设置此项。

最简单的方法可能就是使用绝对定位。

#head_area {
    position:absolute;
    top:0;
    height:45px;
}
#main_area {
    position:absolute;
    top:45px;       /* position below header */
    bottom:20px;    /* make room for footer */
    overflow:scroll;
}
#foot_area {
    position:absolute;
    bottom:0;
    height:20px;
}

你说那个

#head_area＆amp; #foot_area始终在默认情况下可见但在缩放（'ctrl'+'+'）它应该像往常一样移出窗格......

但是#main_area使用overflow：scroll是没有意义的。什么时候应该滚动，何时它应该变大（同时仍然滚动溢出？）并将页脚移出视口？

Answer 3

要使页脚保持在底部，您可以将其从包装中取出，例如：

<div id="wrapper">

        <div id="header">
            <div id="logo">
                <h1>Logo Here</h1>
            </div>
        </div>

        <div id="main">
            <div id="content_main"><p>Lorem ipsum dolor sit amet</p></div>
        </div>

</div>

<div id="footer">
    <p>Footer Stays Here Woop Woop</p>
</div>

然后在CSS中将文档正文设置为100％高度，然后子元素可以使用该空格

html,body {
    height:100%;
}

然后页脚的CSS将类似于：

#footer {
   position:relative;
   height:75px; //the height of the footer
   margin-top:-75px; //pull the footer back onto screen
   width:100%;
   background:#ccc; 
}

JSFiddle示例http://jsfiddle.net/9SuGG/

编辑，这是一个更好的例子（JSFiddle）

使用固定的页眉和页脚以及可滚动的中心部分，使用一个小jQuery来更改溢出包装的高度（还添加了样式的abit）：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
* {
    margin:0;
    padding:0;
}

html,body {
    height:100%;
    width:100%;
    overflow-x:hidden;
    overflow-y:hidden;
    background:#111;
    color:#fff;
    margin:0;
}

#wrapper {
    width:100%;
    height:100%;
    min-width:415px;
    margin:0;
}

#header {
    width:100%;
    min-height:92px;
    border-bottom:1px solid #2A2A2A;
    background:#0E0E0E;
    box-shadow:0 0 14px rgba(0,0,0,0.4) inset;
}

#header h1 {
    font-size:4em;
    font-weight:700;
    margin-left:10px;
    text-shadow:2px 2px 0 #000;
}

#content_wrap {
    width:100%;
}

#content_main {
    position:relative;
    height:100%;
    min-height:100px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0 5px;
}

#footer {
    clear:both;
    position:relative;
    margin-top:-30px;
    height:30px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    border-top:1px solid #2A2A2A;
    background:#0E0E0E;
    box-shadow:0 0 14px rgba(0,0,0,0.4) inset;
    padding:0 5px;
}

#footer p {
    text-align:center;
    padding-top:4px;
}
/*example make the text big, to show side bar*/
#content_main{font-size:200%}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(function(){
    $(window).resize(function() {
        $('#content_main').height($(window).height() - 120);
    });
    $('#content_main').height($(window).height() - 120);
});
</script>
</head>

<body>

<div id="wrapper">
    <div id="header">
        <h1>Lorem ipsum</h1>
    </div>
    <div id="content_wrap">
        <div id="content_main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec suscipit libero. Vivamus nunc 
        sapien, pellentesque vitae dui id, pretium volutpat ligula. Proin varius eros non fringilla tincidunt.
        Cras dignissim ligula molestie lobortis placerat. Donec at imperdiet ligula, sit amet sodales eros.
        Nam tempus lobortis urna ut porta. Pellentesque pulvinar justo ac est faucibus, sit amet tristique 
        nunc tristique. Curabitur sit amet accumsan dolor. Vivamus eu commodo diam, ullamcorper pharetra neque.
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec suscipit libero. Vivamus nunc 
        sapien, pellentesque vitae dui id, pretium volutpat ligula. Proin varius eros non fringilla tincidunt.
        Cras dignissim ligula molestie lobortis placerat. Donec at imperdiet ligula, sit amet sodales eros.
        Nam tempus lobortis urna ut porta. Pellentesque pulvinar justo ac est faucibus, sit amet tristique 
        nunc tristique. Curabitur sit amet accumsan dolor. Vivamus eu commodo diam, ullamcorper pharetra neque.
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec suscipit libero. Vivamus nunc 
        sapien, pellentesque vitae dui id, pretium volutpat ligula. Proin varius eros non fringilla tincidunt.
        Cras dignissim ligula molestie lobortis placerat. Donec at imperdiet ligula, sit amet sodales eros.
        Nam tempus lobortis urna ut porta. Pellentesque pulvinar justo ac est faucibus, sit amet tristique 
        nunc tristique. Curabitur sit amet accumsan dolor. Vivamus eu commodo diam, ullamcorper pharetra neque.
       </div>
    </div>
</div>
<div id="footer">
    <p>Lorem ipsum By Lawrence Cherone</p>
</div>

</body>
</html>

自动将<div>高度调整为视口/窗口中的剩余空间</div>

3 个答案:

编辑，这是一个更好的例子（JSFiddle）