1

我想制作一个具有两列固定宽度的页面，每列都有自己的背景颜色，在页面的整个高度上延伸，即使在向下滚动大内容时也是如此。一个简单的说明图：https ://dl.dropbox.com/u/3060536/twocol.png

我找到了几种几乎可以满足我需求的解决方案。

  • height:100%只要你不滚动，到处都是，看起来很棒：这似乎与屏幕的高度有关（当向下滚动更长的文本时背景会消失）。
  • 穿上height:100%html 和 body 以及min-height:100%其中一个 div，我可以让一列填满整个高度。但这需要直接在主体下方完成，因此它似乎无法与我想要的居中两列布局相结合。
  • 如果所有内容都适合屏幕，则将padding-bottom:100000pxandmargin-bottom:-100000px放入列和overflow-y:hidden父级中可以正常工作，但如果文本不适合屏幕，它会完全删除向下滚动的选项。

所以以上都不是我想要的。这样做的正确方法是什么？

4

3 回答 3

0

你可能会在这里得到一些想法。如果 position:relative 不打扰你，试试这个。

<html>
<head>
<title>sample</title>
</head>

<body style="height:100%;">

<center>
    <div style="position:relative; width:900px; height:100%;">

        <div style="position:relative; float:left; background-color:blue; width:200px; height:auto; min-height:100%;">
            '//some texts or controls
        </div>


        <div style="position:relative; float:left; background-color:green; width:700px; height:auto; min-height:100%;">
            '//some texts or controls
        </div>

    </div>
</center>   

</body>
</html>
于 2013-03-03T06:23:18.173 回答
-1

我没有对此进行测试，我很确定left: 50%; margin-left: -450px它不能很好地使元素居中。但自从我完成 html 以来已经有一段时间了。

#background: {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 900px;
    left: 50%;
    margin-left: -450px;
    background-color: red;
}
#background div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background-color: blue;
}

和 HTML

<div id="content"></div>
<div id="background"><div></div></div>

更新

正如我所说，它未经测试。原来我忘了包括heightor bottomfor #background，可能还有别的东西。

这是一个有效的想法的例子http://jsfiddle.net/bEuTU/

于 2013-03-03T00:54:38.227 回答
-1

看看博文。我花了一段时间才理解它是如何工作的，但确实如此，而且很棒。

于 2013-03-03T01:12:35.723 回答