html - 当我将 HTML 标记设置为 100% 高度时,我的内容消失了

标签 html background height css

我有一个垂直布局,我想在页面上保持居中。一列固定在页面上,而另一列应根据内容滚动,并且有一些装饰性的 float 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>&nbsp;</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%,即“主体”。由于“body”没有设置高度,body 的高度被计算为足以包裹整个页面的高度。

注意:在 body 上设置 height:100% 无法使其缩放到整个窗口;你必须在 body 上设置 position:absolute 并使上/左/右/下为零才能做到这一点。

回到“ body ”高度计算。请注意,尺寸计算包括任何“ float ”的内容,因为当您“ float ”某些内容时,它会将其置于正常布局的之外。任何“ float ”的东西都不占用空间!

试试这个实验:在你的“container”中关闭overflow:hidden,你会看到“container”和“body”的高度突然坍缩为零。您的所有元素都是 float 的,因此如果没有 overflow: hidden,它们将不占用空间。

因此,你这堆乱七八糟的 CSS 本质上是告诉“内容”将自身调整为“容器”高度的 100%,也就是“主体”的 100%,这是包含所有内容所需的任何高度页面的内容。 overflow: hidden 在“container”中,那个高度就是“content”的高度。没有 overflow: hidden 在“容器”中,该高度为零。

如果“content”的高度是 100% of zero,也就是零,并且它本身没有设置“overflow: hidden”,而且它是一个 block 元素,那么这个高度将被简单地忽略并且高度变为容纳其元素所需的任何高度。

给你。现在你知道为什么你的橙色没有一直延伸到屏幕底部了。您依赖于“body”上的 height:100% 将其拉伸(stretch)到屏幕的整个高度;这种方式行不通。

解决方案?

  1. 删除整个内容并完全重写您的 CSS -- 太乱了。你不想要这个。而且它永远都不适合您。找一本关于 CSS 的好书,通读一遍,然后正确去做。 CSS 不是您可以通过反复试验来学习的东西。

  2. position:absolute;开始左:0px;右:0px;顶部:0px; bottom:0px; 在“正文”上。这将拉伸(stretch)“主体”以填满整个窗口。通过在“body”上设置背景颜色来检查它。

  3. 请注意,#2 可能不适用于移动浏览器。您需要设置像素值的最小高度以确保它填满整个屏幕。

关于html - 当我将 HTML 标记设置为 100% 高度时,我的内容消失了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5695698/

相关文章:

html - 带有三 Angular 形的盒子就像聊天

javascript - Ruby on Rails : How to add a link_to in a select_tag

html - 如何构建 HTML 解析器?

html - 调整到屏幕高度的图像高度

JavaScript 无法运行,但可以在 jsFiddle 中运行

browser - 跨浏览器 CSS3 转换解析错误

iPhone:应用程序退出时停止监控重大位置变化

css - 更改不同页面上主要内容 block 的背景颜色

html - css 中间 div 滚动和 100% 高度

javascript - jquery在 'li'中找到 'ul'个项目的数量并应用一些数学来计算 'ul'的高度