1
私は現在、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>
あなたのhtmlのスニペットは、最大 '＃のcontainer'要素にすべてをレイアウトするだろうhandlyなるが、それはあなたのコンテナが定義された高さを持っていない要素である可能性がありますどのような。 – sg3s
投稿を編集してHTMLを含めました。 ;） –
私はあなたの答えを見つけました。 sidenoteとして。 '＃container'は70％の不透明度に設定されています。これはいいですが、おそらくrgbaの背景とIEをサポートするフィルタプロパティを調べるべきです。http://nickcowie.com/2009/rgba-backgrounds-in-ie/ – sg3s