1
尊敬的Stack Overflow读者，我目前在CSS中工作，我遇到了麻烦，给我的容器100％的最小高度，让我的页脚位于页面底部，而不是更高。最小高度：100％在我的容器上不起作用？
*{
margin:0;
padding:0;
}
html,body{
margin:0;
padding;0;
height:100%;
}
body{
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:12px;
color:#EFEFEF;
background:url(../img/bg.jpg);
}
#container{
width:1150px;
opacity:0.7;
background-color:black;
min-height:100%;
margin:auto;
}
/* Main Navigation */
#main-nav { height: 50px; }
#main-nav dl { margin: 0; padding: 0; }
/* IE5 Mac Hack \*/
#main-nav { padding-left: 11px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */
#main-nav dt { float: left; }
#main-nav dt a {
display: block;
height: 0px !important;
height /**/:50px; /* IE 5/Win hack */
padding: 50px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}
#main-nav dt a:hover {
background-position: 0 -50px;
}
#main-nav dt#about,
#main-nav dt#about a { width: 71px; background-image: url(../img/nav/about.gif); }
#main-nav dt#services,
#main-nav dt#services a { width: 84px; background-image: url(../img/nav/services.gif); }
#main-nav dt#portfolio,
#main-nav dt#portfolio a { width: 95px; background-image: url(../img/nav/portfolio.gif); }
#main-nav dt#contact,
#main-nav dt#contact a { width: 106px; background-image: url(../img/nav/contact.gif); }
body.about dt#about,
body.about dt#about a,
body.about dt#about a:hover,
body.services dt#services,
body.services dt#services a,
body.services dt#services a:hover,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.portfolio dt#portfolio a:hover,
body.contact dt#contact,
body.contact dt#contact a,
body.contact dt#contact a:hover {
background-position: 0 -100px;
}
body.about #header {
height: 150px;
background: #db6d16
url(../img/headers/about.jpg);
}
#header{
height:150px;
background:#DB6D16 url(../img/headers/about.jpg);
}
#header h1{
margin:0;
padding:0;
float:right;
margin-top:57px;
padding-right:31px;
}
#sidebar{
float:right;
width:280px;
line-height:18px;
}
#content{
margin-right:280px;
line-height:18px;
}
#footer{
height:100px;
clear:both;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:10px;
color:#C9C9C9;
border-top:1px solid #EFEFEF;
padding:13px 25px;
line-height:18px;
margin-top:-100px;
position:relative;
}
#footer a{
color:#C9C9C9;
text-decoration:none;
}
#footer a:hover{
color:#DB6D16;
}
#footer #altnav{
width:350px;
float:right;
text-align:right;
}
#main{
overflow:auto;
padding-bottom:100px;
}
.hidden{
display:none;
}
#content h2{
margin:0;
padding:0;
padding-bottom:15px;
}
#content p{
margin:0;
padding:0;
padding-bottom:15px;
}
#sidebar .padding, #content .padding{
padding:25px;
}
这是我使用的CSS，效果是：http://picpaste.com/e85f01c1b470e03c36988c1487917add.png 所以，如果你看一下PIC，我想有页脚（一切白线下方）是在最底层，和页脚上方的所有内容（内容，边栏，页眉，菜单）连接到页脚的顶部。
如果需要更多信息，请不要问！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Johann Behrens :: Portfolio</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Johann Behrens" />
<link rel="stylesheet" type="text/css" href="css/basis.css" />
</head>
<body class="about">
<div id="container">
<div id="main" class="clearfix">
<div id="main-nav">
<dl>
<dt id="about">
<a href="#">About</a>
</dt>
<dt id="services">
<a href="#">Services</a>
</dt>
<dt id="portfolio">
<a href="#">Portfolio</a>
</dt>
<dt id="contact">
<a href="#">Contact</a>
</dt>
</dl>
</div>
<div id="header">
<h1><img src="img/general/logo_enlighten.gif" width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
</div>
<div id="sidebar">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
</div>
<div id="content">
<div class="padding">
<h2><img src="img/headings/about.gif" width="54" height="14" alt="About" /></h2>
<p>
<strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio.
</p>
<p>
We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free to contact us.
</p>
<h2><img src="img/headings/contact.gif" width="98" height="14" alt="Contact Us" /></h2>
<p>
Phone: (07) 853 6060
<br />
Fax: (07) 853 6060
<br />
Email: <a href="mailto:[email protected]">[email protected]</a>
<br />
P.O Box: 14159, Hamilton, New Zealand
</p>
<p>
<a href="#">More contact information…</a>
</p>
</div>
</div>
</div>
<div id="footer">
<div id="altnav">
<a href="#">About</a> - <a href="#">Services</a> - <a href="#">Portfolio</a> - <a href="#">Contact Us</a> - <a href="#">Terms of Trade</a>
</div>
Copyright © Johann Behrens
<br />
Powered by <a href="http://www.mijndomein.nl">Mijn Domein</a> and designed by <a href="http://www.jbehrens.nl">Johann Behrens</a>.
</div>
</div>
</body>
</html>
什么是handly将是你的HTML代码段铺设一切都交给了'＃container'元素，但很可能你的容器中的一个元素是没有定义的高度。 – sg3s 2012-03-25 14:31:54
我编辑过这篇文章，并附上HTML。 ;） – 2012-03-25 14:39:09
我看到你找到你的答案。作为一个旁注;你已将＃容器设置为不透明度70％。虽然这很好，你应该看看rgba的背景和过滤器属性来支持IE http://nickcowie.com/2009/rgba-backgrounds-in-ie/ – sg3s 2012-03-25 14:59:39