您好，我已经在该站点上进行了一段时间的研究，但一直未能找到解决我的问题的答案。我希望扩展我的 body div 以填充 100%，同时将页脚保持在页面底部。正如您将在我的代码中看到的那样，页脚有点问题，因为我使用的是“横幅”和网站联系信息下方。 (参见提供的图片)。无论如何，我已经尝试了一些在其他问题上找到的解决方案，但我无法正确地将解决方案应用于我的代码。如果有人能指出我正确的方向，我将非常感激。我也喜欢只在可能的情况下用 html 和 css 维护代码。
该页面在常规尺寸的显示器上不应该是可滚动的，因为我的内容很少 放到网站上。这里我提供了一个jsfiddle来进一步说明我的问题。在上面你会看到我想要的是我的 body (绿色)动态改变高度以始终填满屏幕。考虑到我的页脚(蓝色)也应该显示在屏幕上。
[我的 JSFiddle] http://jsfiddle.net/yuyocollores/3aJBP/2/
这是我的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="dcterms.created" content="Fri, 30 May 2014 18:35:33 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Some Title</title>
<link href="gr.css" rel="stylesheet" type="text/css"></link>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
</head>
<body id="htmlbody">
<div id="container">
<div id="header">
<img src="images/bigLOGO.png" />
</div>
<div id="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="services.html">SERVICES</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<div id="body">
<img src="images/homeCONTENT.png" id="homecontent">
<p id="hometext">
Some Slogan text
</p>
</div>
</div>
<div id="footerImageBanner">
<img src="images/LogoVersion2Small.png" />
</div>
<div id="footercontainer">
<p id="footertextsmall">
Address:
<span id="footertextsmall">Some address</span>
</p>
<p id="footertextsmall">
Copyright
<span id="footertextsmall">@2014</span>
</p>
<p id="footertextsmall">
Phone:
<span id="footertextsmall">(xxx)xxx-xxxx</span>
</p>
</div>
</body>
</html>
这是我当前的 CSS
#htmlbody{
margin:0px;
padding:0px;
background-color:#000000;
}
#container
{
width: 100%;
min-width:500px;
height: 100%;
margin: 0px;
padding: 0px;
overflow:hidden;
}
#header
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 100px;
background-image: url('images/headerBG.png');
background-size: auto;
display: block;
}
#header img
{
display: block;
margin-left: auto;
margin-right: auto;
}
#nav
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 54px;
background-image: url('images/navbarBG.png');
background-repeat: repeat-x;
text-align: center;
}
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
#nav li
{
margin: 0px;
padding: 0px;
float: left;
}
#nav a
{
margin: 0px;
padding-right:6px;
padding-left:-3px;
width: 114px;
height: 50px;
background-image: url('images/btn.png');
background-repeat: no-repeat;
text-decoration: none;
text-transform: uppercase;
text-align:center;
color: #ffffff;
display: table-cell;
vertical-align: middle;
text-shadow: 2px 2px 2px #333333;
}
#nav a:hover
{
background-image:url('images/btnHover.png');
}
#body
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height:auto;
min-height:500px;
background-image: url('images/contentBG.png');
background-repeat: repeat;
overflow:auto;
}
#homecontent
{
width: 100%;
min-width:500px;
height: auto;
margin-top: 40px;
margin-bottom:0px;
}
#hometext
{
padding:0px;
margin-top:20px;
margin-bottom:0px;
text-transform: uppercase;
color: #cccccc;
text-shadow: 2px 2px 5px #000000;
font-size: 165%;
font: arial;
text-align: center;
}
#hometextsmall
{
color: #cc9966;
text-align: center;
font-size: x-large;
}
#contactcontent{
width:720px;
height:400px;
min-height:400px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent
{
width:550px;
height:450px;
min-height:450px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent ul {
list-style-type: none;
padding-left:20px;
margin: 0px;
}
#pagecontent ul li {
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
#pagecontenttext{
margin: 0px;
padding: 0px;
color: #131010;
font: arial;
font-size:18px;
}
#contact{
float:left;
display:block;
width:350px;
height:400px;
margin-left:auto;
margin-right:auto;
}
#footercontainer
{
margin:0px;
padding: 0px;
width: 100%;
height:auto;
display: table;
table-layout: fixed;
background-image: url('images/footerBG.png');
background-repeat: repeat;
}
#footercontainer p
{
margin:0px;
padding: 0px;
display: table-cell;
text-align: center;
margin: 0px;
padding: 0px;
vertical-align: top;
}
#footertextsmall
{
margin: 0px;
padding: 0px;
color: #ffffff;
text-align: center;
font-size:small;
}
#footerImageBanner
{
margin: 0px;
padding: 0px;
width: 100%;
height: 80px;
background-image: url('images/footerImgBG.png');
background-size: auto;
display: block;
}
#footerImageBanner img
{
display: block;
margin-left: auto;
margin-right: auto;
}
最佳答案
关于html - 正文内容 div 展开以在保持页脚的同时填满屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24197918/