当我将 HTML 标签设置为 100% 高度时，我的内容消失了

发布于 2024-11-02 02:43:52 字数 6098 浏览 1 评论 0原文

我有一个垂直布局，我想保持页面居中。一列保持固定在页面上，而另一列应根据内容滚动，并且有一些绝对的装饰性浮动 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>&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:[email protected]">[email protected]</a></p>


    <h5 id="text">Contact Megan, Webmaster:</h5>
    <p id="text"><a href="mailto:[email protected]">[email protected]</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;
}

原文

I have a vertical layout that I want to remain centered on the page. One column stays fixed on the page while the other should scroll according to the content and there are some decorative floating divs that are absolute. I want the scrolling column to display 100% vertically, even if the content doesn't require the height, but I can't seem to get this to work. I've set the html tag and body tag to height:100%, as well as all of the necessary div tags. Having the html tag set to this attribute causes all of the content except for .content and .share to disappear.

Here is my 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]">[email protected]</a></p>


    <h5 id="text">Contact Megan, Webmaster:</h5>
    <p id="text"><a href="mailto:[email protected]">[email protected]</a></p>


  <!-- end .content --></div>
<!-- end .container --></div>


</body>
</html>

And here is my 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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

傲影 2024-11-09 02:43:52

你的 CSS 真是一团糟。

首先，避免使用 position:fixed，尤其是在如此大规模的情况下。大多数移动浏览器不会“修复”这些位置，并且一些较旧的浏览器无法正确渲染它们。

height:100% 表示将高度设置为其父容器的 100%。然而，在本例中它是“容器”，它的大小又是其容器（即“主体”）的 100%。由于“body”没有设置高度，因此计算出的 body 高度足以包裹整个页面。

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

回到“body”高度计算。请注意，大小计算不包括任何“浮动”的内容，因为当您“浮动”某些内容时，它会将其置于正常布局之外。任何“浮动”的东西都不占据空间！

尝试这个实验：关闭“容器”中的 overflow:hidden，你会看到“容器”和“主体”的高度突然塌陷为零。所有元素都是浮动的，因此如果没有 overflow:hidden，它们不会占用空间。

因此，CSS 的整个混乱本质上是告诉“内容”将其自身调整为“容器”高度的 100%，即“主体”的 100%，即包含容器的所有内容所需的任何高度。页。在“container”中使用overflow:hidden，该高度就是“content”的高度。如果“容器”中没有 overflow:hidden，则高度为零。

如果“content”的高度是零的100%，即零，并且它本身没有设置“overflow:hidden”，并且它是一个块元素，那么这个高度将被忽略，高度变成容纳其元件所需的任何高度。

就这样吧。现在您知道为什么橙色没有一直延伸到屏幕底部了。您依赖“body”上的 height:100% 将其拉伸到屏幕的整个高度；这是行不通的。

解决方案是什么？

删除整个内容并完全重写你的CSS——这太混乱了。你不想要这个。而且它永远都不适合你。找一本关于 CSS 的好书并通读一遍，然后正确去做。 CSS 不是你可以通过反复试验来学习的东西。
以 position:absolute 开头；左：0px；右：0px；顶部：0px； “body”上的“bottom:0px;”。这将拉伸“主体”以填充整个窗口。通过在“body”上设置背景颜色来检查它。
请注意，#2 可能不适用于移动浏览器。您需要设置一个最小高度像素值，以确保它填满整个屏幕。

Your CSS is a huge mess.

First, avoid using position:fixed, especially on such large scale. Most mobile browsers don't "fix" those positions, and some older browsers render incorrectly with them.

height:100% means set the height to 100% of its parent container. However, which in this case is "container", which again is sized as 100% of its container, which is "body". As "body" does not have a height set on it, body's height gets calculated to be enough height to wrap the entire page.

Note: Setting height:100% on body doesn't work to make it scale to the entire window; you have to set position:absolute on body and make top/left/right/bottom zero to do that.

Back to the "body" height calculation. Notice that the sizing calculation does not include anything that is "floated", because when you "float" something, it takes it outside of the normal layout. Anything that is "floated" occupy no spacing!

Try this experiment: turn off overflow: hidden in your "container", and you'll see the height of "container" and "body" suddenly collapses into zero. All your elements are floated, so they take up no space if there is not overflow: hidden.

Thus, you whole mess of CSS is essentially telling "content" to size itself to 100% of the height of "container", which is 100% of "body", which is whatever height that is necessary to include all the content of the page. With overflow: hidden in "container", that height is the height of "content". Without overflow: hidden in "container", that height is zero.

If the height of "content" is 100% of zero, which is zero, and it does not itself have "overflow: hidden" set on it, and it is a block element, then this height will simply be ignored and the height becomes whatever height that is required to hold its elements.

There you go. Now you know why your orange doesn't extend all the way to the bottom of the screen. You were depending on height:100% on "body" to stretch it out to the full height of the screen; it doesn't work this way.

The solution?

DELETE THE WHOLE THING AND TOTALLY REWRITE YOUR CSS -- It is too much of a mess. You don't want this. And it will never work right for you. Get a good book on CSS and read through it, then do it RIGHT. CSS is not something you can learn via trial-and-error.
Start with position:absolute; left:0px; right:0px; top:0px; bottom:0px; on "body". This will stretch "body" to fill the whole window. Check it by setting a background color on "body".
Notice that #2 may not work on mobile browsers. You'll need to set a min-height in pixel value to make sure that it fills the whole screen.

回复收藏 0 原文

若能看破又如何 2024-11-09 02:43:52

我认为这是 .extraDiv2 {height:100%} 造成的。

在 Chrome 10 中看起来不错，但在 IE9 中却很糟糕。尝试删除 .container 元素上的宽度，并将 .content 的浮动从右浮动更改为左浮动。对IE9可能有一点帮助。

回复收藏 0 原文

木槿暧夏七纪年 2024-11-09 02:43:52

“我希望滚动列垂直显示 100%，即使内容不需要高度，但我似乎无法让它工作”

您最好的选择是使用一些 jQuery 来动态设置高度视口高度。

演示： http://jsfiddle.net/wdm954/a2jhw/

编辑：显示 w/ jquery加载中。

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        fixHeight();
    });

    $(window).resize(function () {
        fixHeight();
    });

    function fixHeight() {
        var $h = $(window).height();
        $('#someDiv').height($h);
    }

</script>

编辑：好的，基本上在这里我创建了一个函数（fixHeight），我们在其中放置代码来修复高度。然后，当文档准备好并且调整窗口大小时，我们运行该函数。

另外，这里还有一些针对您的代码的修复...

在此处关闭了评论。

ul.nav {
  list-style: none; /* this removes the list marker */
}

删除了这里的数字和“px”之间的空格...

.leaderboard {
  width: 795px;
  margin: 0px auto;
  background-color: #61ADC3;
}

#ads_column {
  float: right;
  padding: 5px 5px 0px 5px;
}

"I want the scrolling column to display 100% vertically, even if the content doesn't require the height, but I can't seem to get this to work"

Your best bet is to use some jQuery to set the height dynamically based on the viewport height.

Demo: http://jsfiddle.net/wdm954/a2jhw/

EDIT: To show w/ jquery loading.

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        fixHeight();
    });

    $(window).resize(function () {
        fixHeight();
    });

    function fixHeight() {
        var $h = $(window).height();
        $('#someDiv').height($h);
    }

</script>

EDIT: Ok basically here I created a function (fixHeight) where we put the code to fix the height. Then we run the function when the document is ready and when the window is resized.

Also here are some fixes for your code...

Closed the comment here.

ul.nav {
  list-style: none; /* this removes the list marker */
}

Removed the spaces between your numbers and "px" here...

.leaderboard {
  width: 795px;
  margin: 0px auto;
  background-color: #61ADC3;
}

#ads_column {
  float: right;
  padding: 5px 5px 0px 5px;
}

回复收藏 0 原文

风为裳 2024-11-09 02:43:52

仅当 cointainer 块（本例中为 html）定义了固定高度时，高度 100% 才有效。
除此之外，我不明白为什么事情会消失。

编辑：以上在 html 的情况下不正确。（参见评论）

在您的情况下您需要将html设置为height:100%（而不是min-height:100% ）。这将解决问题。

我同意代码可以改进的观点，但是干得好，学习是一步一步进行的。

回复收藏 0 原文

~没有更多了~

关于作者

伴梦长久

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

当我将 HTML 标签设置为 100% 高度时，我的内容消失了

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

当我将 HTML 标签设置为 100% 高度时，我的内容消失了

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。