我需要创建一个网页,其中的常规页眉+粘性页脚+垂直拉伸流体内容。但是,这些位置不能是绝对的,因为我需要页面的最小高度为780px。
我设法使用表来完成此操作,但我真的想避免使用它们。我也想避免使用JS或jQuery。粘性页脚只有在达到最小高度之前才是粘性的。
对不起,所有这些特定用语,只是我在相当长的时间内一直在为此而苦苦挣扎。我已经尝试使用pusher进行通常的粘性页脚布局,但是当我使用height:100%时,我的主要内容没有被拉伸(当包装器使用height:auto时,似乎有一个错误)。
应发生的情况的示例图像:http : //s22.postimg.org/6fvdd4mxd/layout.png
JS Fiddle展示我现在所拥有的:http : //jsfiddle.net/6qatg/
代码:
<body>
<table class="wrapper">
<tr><td id="topBar" class="topBar">
</td></tr>
<tr><td valign="top" id="mainContent" class="mainContent">
</td></tr>
<tr><td class="footer" id="footer">
</td></tr>
</table>
</body>
html{
min-width: 790px;
min-height: 300px;
font-family: 'Open Sans', sans-serif;
height: 100%;
}
body{
font-family: 'Open Sans', sans-serif;
/*border: 2px solid black;*/
height: 100%;
min-height: 300px;
min-width: 790px;
}
*{
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
.footer {
height: 35px;
background-color: #00F8FD;
width: 100%;
}
.topBar{
height: 75px;
width: 100%;
background-color: #00F8FD;
}
.mainContent{
background-color: #EEF8FD;
height: 100%;
}
提前致谢。
您是否尝试过在内容容器中添加页眉和页脚?我已经将最小高度设置为500,以进行小提琴演示,没有滚动条,并且页脚停留在最小高度500处;或者将其设置为760时,它将保持该高度。
看到这个http://jsfiddle.net/carbontype/FYe2b/
的HTML
<div class="contain">
<div class="content">
<div class="header">header</div>
<div class="data">hello 123</div>
<div class="footer">footer</div>
</div>
</div>
的CSS
*{box-sizing:border-box;}
html, body{height:100%; margin:0px; padding:0px;}
.contain{width:100%; height:100%;}
.header{height:50px; position:absoulte; top:0px; width:100%; background:red; z-index:10;}
.content{height:100%; position:relative; background:green; min-height:500px;}
.content .data{padding:10px;}
.content .footer{position:absolute; bottom:0px; left:0px; width:100%; background:pink;}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句