javascript - 是否可以在没有 JavaScript 的情况下执行此操作(html 布局)

Question

页面布局如下:

<div id="main" style="min-height:500px;"> 
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
<div>

主 div 可以有固定高度或最小高度(style="height:500px;" 或 style="min-height:375px;") .

是否可以让页脚和页眉根据需要占据尽可能多的高度，并允许内容占据其余部分 (content.height = main.height - (header.height + footer.height))(不使用 JavaScript、弹性页眉和页脚，剩下的就是内容)？

Answer 1

是的，是可能的。

HTML:

<div id="main"> 
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
<div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* needed for #main min-height */
}

div#main {
    position: relative; /* needed for footer positioning */
    height: auto !important; /* real browsers */
    height: 500px; /* IE6: treated as min-height*/
    min-height: 500px; /* real browsers */
}

div#header {
    /* Will be as high as its content */
}

div#content {
    /* Will be displayed below #header regardless to its height */
    padding: 0px 0px 50px 0px; /* bottom padding for footer + space */
}

div#footer {
    position: absolute;
    width: 100%;
    height: 40px; /* Needs to be fixed size because of #content padding-bottom */
    bottom: 0; /* stick to bottom */
}

这实际上并没有按照您的意愿设置 #content 高度，而是按应有的方式显示所有内容(#main 具有预期的高度，#footer 位于底部，不覆盖 #content)。