我有一个垂直布局，我想保持页面居中。一列保持固定在页面上，而另一列应根据内容滚动，并且有一些绝对的装饰性浮动 div。我希望滚动列垂直显示 100%，即使内容不需要高度，但我似乎无法让它工作。我已将 html 标签和 body 标签以及所有必要的 div 标签设置为 height:100%。将 html 标记设置为此属性会导致除 .content 和 .share 之外的所有内容消失。
这是我的html：
<html>
<body>
<div class="leaderboard"></div>
<div class="container">
<div class="share">
<p>All content © 2011
<br />
Web Design © <a href="http://www.unillu.com" target="_blank">Unillu</a>, Megan Prior-Pfeifer</p></div>
<div class="sidebar1">
<img src="assets/llama.png" width="168" height="265" alt="Deathllama logo" />
<ul class="nav">
<li><a href="howto.html"><img src="assets/phone.png" width="208" height="15" alt="How to put ringtones on your phone!" /></a></li>
<li><a href="dinosaur.html"><img src="assets/kill.png" width="208" height="31" alt="Kill a dinosaur the easy way!" /></a></li>
<li><a href="ringtones.html"><img src="assets/ringtones.png" width="208" height="15" alt="Bad ringtones for you to use!" /></a></li>
<li><a href="legal.html"><img src="assets/legal.png" width="208" height="15" alt="Use the content accordingly!"/></a></li>
<li><a href="contact.html"><img src="assets/contact.png" width="208" height="15" alt="Talk to me!"/></a></li>
<li><a href="faq.html"><img src="assets/faq.png" width="208" height="15" alt="Look here before you ask me anything!" /></a></li>
<li><a href="index.html"><img src="assets/home.png" width="208" height="15" alt="Go home!"/></a></li>
</ul>
<p> </p>
<div class="extraDiv1"></div>
<!-- end #sidebar1 --></div>
<div class="content">
<div class="extraDiv2"></div>
<p>Contact</p>
<div class="ads_column"></div>
<h3 id="text">Contact Brian, Creator:</h3>
<p id="text"><a href="mailto:[email protected] /cdn-cgi/l/email-protection">bria[email protected] /cdn-cgi/l/email-protection</a></p>
<h5 id="text">Contact Megan, Webmaster:</h5>
<p id="text"><a href="mailto:[email protected] /cdn-cgi/l/email-protection">[email protected] /cdn-cgi/l/email-protection</a></p>
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
这是我的 CSS：
html, body {
margin: 0;
padding: 0;
color: #FFF;
font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #61ADC3;
}
html {
min-height:100%;
}
body, .container, .content, .extraDiv2, .sidebar{
height:100%;
min-height:100%;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin: 10;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link, a:visited, a:hover, a:active, a:focus{
color: #FFF;
text-decoration: underline;
}
.container {
width: 640px;
margin: 0 auto;
overflow: hidden;
background-color: #61ADC3;
}
.sidebar1 {
z-index: 2;
float: left;
width: 224px;
padding-bottom: 10px;
position: fixed;
background-attachment: fixed;
background-color: #61ADC3;
background-repeat: no-repeat;
background-position: right top;
text-align: right;
padding-right: 32px;
}
.extraDiv1{
z-index:3;
position:absolute;
top:0;
width:29px;
height:609px;
margin-left:227px;
background-image: url(assets/sidebar.png);
background-repeat: no-repeat;
background-position: left top;
}
.extraDiv2{
z-index:5;
position:fixed;
margin-top:-10px;
width:12px;
background-image: url(assets/stripe.jpg);
background-repeat: repeat-y;
background-position: left;
}
.content {
z-index:5;
width: 384px;
float: right;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
background-image: url(assets/gradient.png);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
background-color: #FBB03B;
}
/* Hack for IE */
* html .content {
height: 100%;
}
/* End IE Hack */
.leaderboard {
width:795 px;
margin: 0px auto;
background-color: #61ADC3;
}
#descriptions {
font-size: 12px;
line-height: 1;
display: block;
width: 170px;
margin:15px 55px;
}
#descriptions h5 {
font-size:14px;
font-weight:bold;
}
#text {
font-size: 12px;
line-height: 1;
width: 200px;
margin: 15px 25px;
}
#text h5{
font-size: 14px;
font-weight: bold;
}
#play {
width: 25px;
margin-right:0px;
float:left;
}
.share {
z-index:5;
font-size:9px;
bottom: 0px;
text-align: right;
width: 256px;
position:fixed;
float: left;
color: #F00;
}
.share a {
color: #C30;
}
#ads_column {
float:right;
padding: 5 px 5 px 0 px 5px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none; /* this removes the list marker
}
ul.nav li {
display: block;
margin: 5px;
}
ul.nav a, ul.nav a:visited {
margin: 5px;
display: block;
text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
border:1px;
border-color: #F30;
}
