My content disappears when I set the HTML tag to 1

2020-06-23 22:31发布

站内文章 / HTML/CSS

54 0

男人必须洒脱

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>&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>

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;
}

回答1:

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.

回答2:

I think it's the .extraDiv2 {height:100%} which is causing it.

It seems fine in Chrome 10, but very broken in IE9. Try removing the width on the .container element and change the float of the .content from right float to left float. It may help a little with IE9.

回答3:

"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;
}

回答4:

Height 100% only works if the cointainer block (html in this case) has a fixed height defined. Other than that, I don't see why things should be disappearing.

EDIT: The above is not correct in html's case. (See comments)

In your case you need to set html to height:100% (instead of min-height:100%). That will fix the problem.

I concur with the opinion that the code can be improved, but good job, learning happens step by step.