Question

<header> - fixed height
<maincontent> height fills rest of window
<footer> starts just offscreen requiring scroll to see.

我可以使用Javascript以数学方式执行此操作，但想知道是否可以仅使用CSS。

Header height 100px; maincontent 100% margin top -100px; paddingtop 100px页脚

这会有效吗？

Answer 1

这样可行：

这是你在想什么：http://jsfiddle.net/bexcf/1/

这是标记：

CSS

html, body { height:100%;padding:0;margin:0; }
body { 
    padding-top:100px;
    background-color: teal;
}
header,footer {
    width:100%;
    height:100px;
    padding:0;margin:0;
}
header {
    position:absolute;
    top:0;
    left:0;
    background-color:red;
}   
.main-content {
    width:100%;
    height:100%;
    background-color: gold;
}
footer {
    background-color:green;
}

HTML

<header><h1>Header</h1></header>
<div class="main-content">Main Content</div>
<footer>Footer</footer>

这个尺寸指南只能用css吗？

1 个答案: