我是编码初学者，我正在寻找一种方法来在我的主容器 DIV 上实现 100% 的高度以填满我的整个网页，并在底部获得一个粘性页脚。
我希望它能正确显示为带有粘性页脚的完整网页。
我一直在到处寻找清晰的解释，我想为自己和其他人提供一种简单的方法来解决这个问题。
提前致谢
HTML
<!doctype html>
<html class="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="BSHome.css" rel="stylesheet" type="text/css">
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div class="fluid maincontainer">
<div id="div1" class="fluid">Burning Man Sonata Picture</div>
<div class="Navgationbar">Navigation Bar</div>
<div class="fluid MissionStatement"><strong>Lorem Ipsum</strong> Lorem Ipsum.</div>
<div class="fluid youtube">
<div class="videoWrapper">
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="fluid footer">This is the content for Layout Div Tag "footer"</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
.fluid {
clear: both;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
}
#div1 {
background-color: #000000;
width: 100%;
margin-left: 0;
}
.Navgationbar {
text-align: left;
width: 100%;
margin-left: 0;
}
.MissionStatement {
background-color: #333333;
text-align: left;
margin-left: 0;
width: 90%;
}
.maincontainer {
background-position: center top;
background-repeat: repeat-y;
background-attachment: fixed;
background-color: #333333;
background-size: cover;
background-image: url(images/bg-01.jpg);
width: 100%;
height: 100%;
}
body {
background: #000 url(Images/playa.jpg) no-repeat center center fixed;
/**for Safari,Chrome**/
-webkit-background-size: cover;
/**for Firefox**/
-moz-background-size: cover;
/**for Opera**/
-o-background-size: cover;
/**for other browsers**/
background-size: cover;
}
.footer {
width: 100%;
margin-left: 0;
color: #FFF;
text-align: center;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.youtube {
width: 100%;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
width: 100%;
margin-left: 0;
}
body {
background: #000 url(Images/playa.jpg) no-repeat center center fixed;
/**for Safari,Chrome**/
-webkit-background-size: cover;
/**for Firefox**/
-moz-background-size: cover;
/**for Opera**/
-o-background-size: cover;
/**for other browsers**/
background-size: cover;
}
.Navgationbar {
background-color: #333333;
width: 100%;
margin-left: 0;
}
.MissionStatement {
width: 100%;
margin-left: 0;
}
.maincontainer {
width: 100%;
}
.footer {
width: 100%;
}
.youtube {
width: 45%;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.5%;
padding-left: 0.75%;
padding-right: 0.75%;
float: none;
height: 100%;
height: auto;
position: relative;
clear: none;
min-height: 100%;
}
#div1 {
color: #FFF;
font-size: 3em;
width: 100%;
margin-left: 0;
}
body {
background: #000 url(Images/playa.jpg) no-repeat center center fixed;
/**for Safari,Chrome**/
-webkit-background-size: cover;
/**for Firefox**/
-moz-background-size: cover;
/**for Opera**/
-o-background-size: cover;
/**for other browsers**/
background-size: cover;
height: 100%;
min-height: 0%;
margin-right: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
}
.Navgationbar {
color: #FFF;
width: 100%;
margin-left: 0;
font-family: serif;
}
.MissionStatement {
color: #FFF;
width: 98%;
text-align: left;
margin-left: 1%;
margin-right: 1%;
}
.maincontainer {
text-align: center;
width: 100%;
overflow-y: auto;
bottom: 100px;
}
.footer {
color: #FFF;
width: 100%;
text-align: center;
background-color: #330066;
position: static;
margin-bottom: 5px;
}
.youtube {
width: 45%;
margin-left: 1%;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
最佳答案
如果你想要全高的网站，你必须使用这个:
html, body{height:100%;}
对于粘性页脚，您必须使用:
*{
margin: 0;
}
html, body {
height: 100%;
}
.content{
min-height: 100%;
margin-bottom: -150px;
}
.content:after{
content: "";
display: block;
}
footer, .content:after{
height: 142px;
}
和html
<div class="content"></div>
<footer></footer>
关于html - 100% 高度和流体布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20739360/