据我了解，要使 div 的实际高度达到 100%，父 div 是否需要正确设置？
因此，想象一个看起来像这样的 div 结构:
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="gallery">gallery</div>
<div class="push">This is inside the push</div>
</div>
<div class="footer">Footer</div>
</body>
这基本上应该是基于 Ryan Faith 的粘性页脚布局的粘性页脚布局。
在这种情况下，图库如何具有 100% 的高度以及包装？我想不通。
我的 CSS 看起来像这样:与 Ryan 的 CSS 完全相同，只是添加了 gallery 类。
* {
margin: 0;
}
html, body {
height: 100%;
}
.gallery {
background-color:blue;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%
margin-left: auto;
margin-right: auto;
width:830px;
margin-bottom: -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px;
margin-left: auto;
margin-right: auto;
width: 830px;
}
最佳答案
(删除所有旧内容)
这是带有 100% 画廊的新 HTML，希望它有效:-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.header{background-color: green;position: fixed; top:0;width: 830px;height: 80px; z-index:1;}
.gallery {background-color:blue;height: 100%;}
.wrapper {
height: 100%;
margin: 0 auto;
width:830px;
}
.footer, .push {
height: 80px;
width: 830px;
background-color: #CCFF00;
position: fixed;
bottom:0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="content gallery">gallery</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
关于html - CSS - 多个 100% 高度 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2250925/