我知道有很多问题要求如何制作粘性页脚和100%最小高度的主要容器。但是我怎么能有多个部分并使每个部分100%最小高度,同时仍然将页脚推到下面?
我有以下内容,这些部分很好,100%,但页脚没有被推下来。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css" media="all">
html, body, .main-container{height:100%;}
section{min-height: 100%;}
.footer-container{height: 100px;}
</style>
</head>
<body>
<div class="header-container">
<header>
header
</header>
</div>
<div class="main-container">
<section>
section
</section>
<section>
section2
</section>
<section>
section3
</section>
</div>
<div class="footer-container">
<footer>
footer
</footer>
</div>
</body>
</html>
对应的jsFiddle:http://jsfiddle.net/S7h8s/
答案 0 :(得分:1)
答案 1 :(得分:0)
我得到了这个工作,但不得不改变布局:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css" media="all">
html, body {height:100%;}
section{min-height: 100%;}
.footer-container{height: 100px;}
</style>
</head>
<body>
<header>
header
</header>
<section>
section
</section>
<section>
section2
</section>
<section>
section3
</section>
<footer>
footer
</footer>
</body>
</html>
jsFiddle: