HTML：标题+页脚+具有某些规格的流体内容 [英] HTML: Header + Footer + Fluid Content with certain specifications
问题描述
我需要创建一个网页，正常标题+粘性页脚+流体内容垂直拉伸。
然而，这些位置不能是绝对的，因为我需要的页面最小高度为780px。
I need to create a webpage, with a normal header + sticky footer + fluid body content stretched vertically. However, these positions can't be absolute, as I need a page min-height of 780px.
我设法使用表，真的想避免使用它们。另外，我想避免使用JS或jQuery。
粘性页脚只有在达到最小高度之前才粘。
I managed to acomplish this using tables, but I really want to avoid using them. Also I'd like to avoid the usage of JS or jQuery. The sticky footer is only sticky until min-height is reached.
对于所有这些特定术语，这只是我在努力一些时间。我尝试了通常的粘性页脚布局与推动器，但我的主要内容不伸展，当我使用height：100％（当包装使用height：auto时，似乎有一个错误）。
Sorry for all these specific terms, it's just that I'm struggling with this for quite some time. I've tried the usual sticky footer layout with the pusher , but my main content isn't stretched when I use height: 100% (it seems there's a bug when the wrapper uses height: auto).
应该发生什么的示例图片： http：//s22.postimg。 org / 6fvdd4mxd / layout.png
Example image of what should happen: http://s22.postimg.org/6fvdd4mxd/layout.png
JS显示我现在的状态：
http://jsfiddle.net/6qatg/
JS Fiddle to show what I have right now: 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它将保持这一点。
have you tried adding the heading and footer inside the content container? I've made the min height 500 for fiddle demo purposes, there is no scroll bars and the footer stays down at min height of 500 - or when set to 760 it will stay to that.
查看此
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;}
这篇关于HTML：标题+页脚+具有某些规格的流体内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http：//s22.postimg。 org / 6fvdd4mxd / layout.png](\"http://s22.postimg.org/6fvdd4mxd/layout.png\"){kind=link}