我喜欢根据窗口的高度创建我的样式,通常通过创建html和body来实现高度100%
html, body{
min-height: 100%;
height: 100%;
}
然后我可以根据下面的jsfiddle中显示的那些来设置剩余元素的高度。问题是,我希望我的页脚能够粘到底部,这对于不超出窗口高度的页面非常有用,但是如果他们这样做,页脚会固定在那里。我怎么能修复它,使得我仍然使用html,100%的身高,并且仍然让页脚始终坚持到底部。 *注意:我已经完成了
的包装方式#wrapper{
min-height:100%;
}
并且效果不佳导致子元素的高度不能很好地工作。
http://jsfiddle.net/mmahalwy/m4AjL/
建议?
修改 这样解决了: http://jsfiddle.net/mmahalwy/7wqqF/
谢谢大家!
答案 0 :(得分:1)
问题在于
你正在使用2个100%高度的css样式标签,每个名为class = block,如果你只是制作了一个高度为100%的主div,而其中所有其他div都可以正常工作。
答案 1 :(得分:0)
<body>
<container>
<div class="block">
<h1>Content</h1>
</div>
<div class="block">
<h1>Content</h1>
</div>
</container>
<footer>I am a footer</footer>
</body>
html, body {
min-height: 100%;
height: 100%;
}
container {
background: grey;
display: block;
height: 100%;
width: 100%;
}
.block {
height: auto;
}
footer {
background-color: blue;
color: white;
position: relative;
bottom: 0px;
width: 100%;
}
答案 2 :(得分:0)
最佳答案可能取决于您需要的浏览器兼容性类型。
恕我直言,现代的方法是使用CSS3 flexbox,请参阅useful guide from css-tricks.com。代码在这个JSFiddle中:http://jsfiddle.net/m4AjL/24/。
HTML:
<body>
<div class="container">
<div class="block">
<h1>Content</h1>
</div>
<div class="block">
<h1>Content</h1>
</div>
<footer>I am a footer</footer>
</div>
</body>
CSS:
html, body{
min-height: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body{
display: flex;
flex-direction: column;
}
.block{
display: block;
height: 100%;
}
footer{
background-color: blue;
color: white;
width: 100%;
flex: none;
}
.container{
flex: 1;
overflow-y: auto;
}