Meg*_*fer 3 html css height background
我有一个垂直布局,我想在页面上保持居中.一列保持固定在页面上,而另一列应根据内容滚动,并且有一些绝对的装饰浮动div.我希望滚动列垂直显示100%,即使内容不需要高度,但我似乎无法使其工作.我已将html标记和body标记设置为height:100%,以及所有必需的div标记.将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:brianbritvec@gmail.com">brianbritvec@gmail.com</a></p>
<h5 id="text">Contact Megan, Webmaster:</h5>
<p id="text"><a href="mailto:mprior@unillu.com">mprior@unillu.com</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;
}
你的CSS非常混乱.
首先,避免使用position:fixed,特别是在如此大规模的情况下.大多数移动浏览器不会"修复"这些位置,而某些旧版浏览器会错误地使用它们.
height:100%表示将高度设置为其父容器的100%.然而,在这种情况下,它是"容器",其大小又是其容器的100%,即"容器".由于"身体"没有设置高度,因此身体的高度被计算为足以包裹整个页面的高度.
注意:height:100%在正文上设置不起作用,使其缩放到整个窗口; 你必须position:absolute在身体上设置并使顶部/左/右/底部为零.
回到"身体"高度计算.请注意,容量计算并没有包括任何的"浮动",因为当你"浮动"的东西,它需要它的外部正常布局.任何"浮动"的东西都没有间距!
尝试这个实验:overflow: hidden在你的"容器"中关闭,你会看到"容器"和"身体"的高度突然坍塌为零.你的所有元素都是浮动的,所以如果没有,它们就不会占用空间overflow: hidden.
因此,你整个CSS的混乱本质上是告诉"内容"将自己的大小调整为"容器"高度的100%,这是"body"的100%,这是包含所有内容所需的任何高度.页.凭借overflow: hidden在"容器",即高度的"内容"的高度.没有overflow: hidden在"容器"中,该高度为零.
如果"content"的高度为零的100%,即零,并且它本身没有设置"overflow:hidden",并且它是一个块元素,那么这个高度将被忽略,高度变为保持其元素所需的任何高度.
你去吧 现在您知道为什么您的橙色不会一直延伸到屏幕底部.你依靠height:100%"身体"将它伸展到屏幕的整个高度; 它不会这样工作.
解决方案？
删除整个过程并完全重写你的CSS - 这太乱了.你不想要这个.它永远不会适合你.获得一本关于CSS的好书并通读它,然后做正确的.CSS不是你可以通过反复试验来学习的东西.
从position:absolute; left:0px; right:0px; top:0px; bottom:0px;"身体"开始.这将拉伸"身体"以填满整个窗口.通过在"body"上设置背景颜色来检查它.
请注意,#2可能无法在移动浏览器上运行.您需要设置像素值的最小高度,以确保它填满整个屏幕.