1

在左侧，我们有一个上下文相关的导航/信息栏。有时其中的信息很少，有时它会占据页面的整个高度。我在其他帖子上看到了很多关于浮动等的建议，但我没有尝试过任何工作。

.tablebox {float:left;position:relative;z-index:1;border-right:1px solid #000000;}
.groupbox {float:left;position:relative;z-index:-1;border-right:1px solid #000000;}

所以侧边栏有两个 div - 一个用于创建背景层，它将占据页面的整个高度，然后是带有实际内容的表格框 - 它可以根据需要具有不同的背景颜色。

<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>

然后我们有右侧的主要内容......再次的想法是tablebox将有不同的背景颜色并且看起来漂浮在页面顶部。

<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>

现在，如果浏览器宽度变得太小，右侧的 div 会低于侧边栏。不管那里有没有空间。

解决方案： 问题是两组 div 的父级没有定义的大小。随着浏览器窗口大小的调整，孩子们被洗牌以适应新的大小。通过定义一个具有固定宽度的父 div 并添加一个 overflow:auto ，即使浏览器窗口是，父级也不会改变。

注意：这显然不是解决此问题的最佳方法 - 这意味着内容不会动态格式化自身。它现在有一个固定的宽度。就我而言，我别无选择。这是一种创可贴解决方案，但如果您处于设计阶段，请考虑使用手机查看您页面的人或使用低分辨率屏幕和大文本的老年人。

对于那些容易混淆的人来说清楚：

<div style="width:1053px;overflow:auto">
<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>
<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>
</div>

但同样 - 如果您有选择，请不要这样做！固定宽度不会使您的网站在某些设备上非常漂亮。

4

1 回答 1

0 
<head>
    <style>
        body {
            padding:0;
            margin:0;
        }
        div {
            width:25%;
            height:25%;
        }
        div.left {
            background-color:red;
            float:left;
        }
        div.right {
            background-color:yellow;
            float:right;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

http://jsfiddle.net/8gNDU/2/

于 2013-01-26T20:11:30.603 回答