我需要一个固定的高度标题，一个固定的高度页脚，以及夹在其间的100％高度div（它持有整页背景图像）。我正在使用粘性页脚，因为这是一个模板，也可用于具有可能溢出的常规内容的页面（没有背景图像）。这适用于常规页面，但在需要100％高度容器的页面上，它会失败。我无法将100％高度div扩展到100％。任何帮助将不胜感激。
这是测试页面，显示我在100％高度div时遇到的问题：http://www.dunnandtigheinteriors.com/new/wp-content/themes/dunntighe/testhome.html
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: Georgia, Times, "Times New Roman", serif;
background: #EFEFEF;
font-size: 14px;
}
#wrapper {
min-height: 100%;
/* height: 100%;
position: relative; Required to absolutely position the footer
text-align: center;*/
}
#headerHolder {
width: 100%;
background: #FFFFFF;
height: 50px;
}
#bkgHolder {
width: 100%;
height: calc(100% - 100px);
background: #DEDFE1;
padding-bottom: 25px;
background-image: url('images/DunnTigheWhiteOverlay.png');
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
overflow:auto;
padding-bottom: 25px; /* must be same height as the footer */
}
#footerHolder {
text-align: center;
font-size: 10px;
height: 25px;
color: #888888;
background-color: #0074a2;
/* position: absolute;*/
/* bottom: 0; Sit it on the bottom
left: 0;*/
width: 100%; /* As wide as it's allowed */
position: relative;
margin-top: -25px;
clear:both;
}
#footerHolder p {
padding: 5px 0 0 0;
margin: 0;
}
#pageText {
overflow:auto;
padding-bottom: 25px; /* must be same height as the footer */
}
.pageContent {
text-align: left;
width: 680px;
margin: 0 auto;
padding-bottom: 15px;
}
和html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="test.css" media="screen" />
</head>
<body>
<div id='wrapper'>
<div id="headerHolder">
</div>
<div id="bkgHolder">
<div id='content'>
some content here
</div>
</div>
</div>
<div id="footerHolder">
<p>All Content and Images, Copyright © Dunn & Tighe Interiors</p>
</div>
</body> </html>
答案 0 :(得分：0)
像这样的工作吗？
<强> HTML：
<div id="bkgHolder"></div>
<div class="wrapper">
<div id="header">
<h1>I'm the Sticky Header</h1>
</div>
<div id='content'>
<p>Some content here</p>
</div>
</div>
<footer class="footer">
I'm the Sticky Footer.
</footer>
<强> CSS：
* {
margin: 0;
}
html, body {
height: 100%;
}
#header {
background:#CCC;
height:50px;
}
#bkgHolder {
background-image: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
width:100%;
height:100%;
position:absolute;
z-index:-10;
}
.wrapper {
min-height: 100%;
margin-bottom: -25px;
position:relative;
}
.wrapper:after {
content: "";
display: block;
}
.footer, .wrapper:after {
height: 25px;
}
.footer {
background:#6AF;
}
p {
color:#FFF;
}
你总是可以这样做吗？
答案 1 :(得分：0)
jQuery函数，该函数将在窗口上调整大小并调整大小，将图像大小调整为当前约束，而不会破坏纵横比。 对此javscript解决方案并不理想，但要求您完成此任务。
<div id="bkgHolder"></div>
<div class="wrapper">
<div id="header">
<h1>I'm the Sticky Header</h1>
</div>
<div id='content'>
<p>Some content here</p>
</div>
</div>
<footer class="footer">
I'm the Sticky Footer.
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
#header {
background:#CCC;
height:50px;
}
#bkgHolder {
background-image: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg');
background-repeat: no-repeat;
background-position: center;
background-size:contain;
width:100%;
height:100%;
position:absolute;
margin-top:50px;
z-index:-10;
}
.wrapper {
min-height: 100%;
margin-bottom: -25px;
position:relative;
}
.wrapper:after {
content: "";
display: block;
}
.footer, .wrapper:after {
height: 25px;
}
.footer {
background:#6AF;
}
p {
color:#FFF;
}
$(function() {
var h = $(window).height();
var w = $(window).width();
$('#bkgHolder').css({
'width': w,
'max-height': h-75,
});
window.onresize = function(event) {
h = $(window).height();
w = $(window).width();
$('#bkgHolder').css({
'width': w,
'max-height': h-75,
});
}
});