min-height：100％在我的容器上不工作？ [英] min-height:100% doesn't work on my container?
本文介绍了min-height：100％在我的容器上不工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
亲爱的读者Stack Overflow，我目前正在使用CSS，我遇到了麻烦，给我的容器100％的最小高度，使我的页脚在页面底部，而不是更高。
Dear fellow readers on Stack Overflow, I am currently working in CSS and I ran into trouble with giving my container a minimal height of 100% to get my footer at the bottom of the page, and not any higher.
*{
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，我想有页脚（白线下面的所有内容）位于底部，页脚上方的所有内容（内容，侧边栏，标题，菜单）都要连接到页脚的顶部。
This is the CSS I use, the effect is: http://picpaste.com/e85f01c1b470e03c36988c1487917add.png So, if you look at the pic, I want to have the footer (everything below the white line) to be at the very bottom, and everything above the footer (content,sidebar,header,menu) to be connected to the top of the footer.
如果需要更多信息，请询问！
If more information is needed, please do ask!
<!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:info@enlighten.co.nz">info@enlighten.co.nz</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>
推荐答案
如果你想把页脚放在底部页面你可以位置：绝对;底部：0;或 http://css-tricks.com/snippets/css/sticky-footer/
If you want to put your footer at the bottom of the page you can either position:absolute;bottom:0; or http://css-tricks.com/snippets/css/sticky-footer/
这篇关于min-height：100％在我的容器上不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
