Question

我有一个垂直布局，我想在页面上保持居中。一列保持固定在页面上，而另一列应根据内容滚动，并且有一些绝对的装饰浮动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;
}

Answer 1

你的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的好书并仔细阅读，然后执行 RIGHT 。 CSS不是你可以通过反复试验来学习的东西。
从“身体”上的position:absolute; left:0px; right:0px; top:0px; bottom:0px;开始。这将拉伸“身体”以填满整个窗口。通过在“body”上设置背景颜色来检查它。
请注意，＃2可能无法在移动浏览器上运行。您需要设置像素值的最小高度，以确保它填满整个屏幕。

Answer 2

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

在Chrome 10中似乎很好，但在IE9中却很糟糕。尝试删除.container元素上的宽度，并将.content的浮点数从右浮点数更改为左浮点数。它可能对IE9有所帮助。

Answer 3

高度100％仅在标记块（本例中为html）定义了固定高度时才有效。除此之外，我不明白为什么事情应该消失。

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

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

我同意这样的观点，即代码可以改进，但是好的工作，学习是一步一步的。

Answer 4

“我希望滚动列垂直显示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;
}

将HTML标记设置为100％高度时，我的内容消失了

4 个答案: