Question

您好我已经在该网站上进行了一段时间的研究，而且我还没有找到能够解决问题的答案。我希望扩展我的身体div以填充100％，同时将我的页脚保持在页面底部。正如您在我的代码中看到的那样，页脚有点问题，因为我正在使用＆＃34; Banner＆＃34;以及该网站的联系信息。（请参阅提供的图片）。无论如何，我已尝试在其他问题上找到一些解决方案，但我还没有能够正确地将解决方案应用于我的代码。如果有人可以指出我正确的方向id深深地欣赏它。也很喜欢只在可能的情况下用html和css维护代码。

Web Layout, see this image

由于内容很少，页面不应在常规尺寸的显示器上滚动放在网站上。这里我提供了一个jsfiddle来进一步说明我的问题。在它上面，你会看到我想要的是我的身体（绿色）以恐怖的方式改变高度以始终填满屏幕。考虑到我的页脚（蓝色）也应该也显示在屏幕上。

[我的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;
}

Answer 1

嘿，你的意思是......

#container div{
 background-color:#fff;
 margin:10px;
}

http://jsfiddle.net/kisspa/QFN9U/

正文内容div展开在保持页脚的同时填充屏幕

1 个答案: