Question

解决！完成CSS和HTML 底部。

好的，情况就是这样。我有一个页面，侧面，顶部和底部有一个div。侧面的div位于225px的左侧。顶部的div为25px，底部的div为20px。我想要的是它们中间的div，所以它根据访问者的浏览器大小调整大小（并且可以滚动）。我有什么作品，但不会滚动，并且不是正确的宽度所以我必须将所有内容集中在其中。它只是使用了浏览器的宽度，但是有点边缘推了一下，所以它实际上悬挂在侧边栏下面。

A quick sketch of how it's setup.

有什么想法吗？

键：菜单是顶部。 bottom_menu是底部菜单。内容是我需要帮助的部分，在中心。侧边栏是侧面的。

CSS：

@charset "UTF-8";
/* CSS Document */

html {
    height:100%;
}

img
{
    border-style: none;
    color: #FFF;
    text-align: center;
}

body {
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
    background-color:#000;
}

.sidebar {
    background-image:url(../images/sidebar/background.png);
    background-repeat:repeat-y;
    width:225px;
    min-height:100%;
    position:fixed;
    top:25px;
    left:0px;
    overflow:hidden;
    padding-left:5px;
    padding-top:5px;
    font: 12px Helvetica, Arial, Sans-Serif;
    color: #666;
    z-index:1;
    }

.menu {
    background-image:url(../images/top_menu/background.png);
    background-repeat:repeat-x;
    width:100%;
    height:25px;
    position:fixed;
    top:0px;
    left:0px;
    overflow:hidden;
    padding-left:5px;
}

.content {
    width:100%;
    top:25px;
    height:100%;
    overflow:hidden;
    position:fixed;
    padding-left:5px;
    padding-top:5px;
    background-color:#FFF;
    margin-left:112px;
    font: 14px Helvetica, Arial, Sans-Serif;
}

.bottom_menu {
    background-image:url(../images/bottom_menu/background.png);
    background-repeat:repeat-x;
    width:100%;
    height:20px;
    position:fixed;
    bottom:0px;
    left:0px;
    overflow:hidden;
    padding-left:5px;
    z-index:2;
    font: 12px Helvetica, Arial, Sans-Serif;
}

HTML（DIV展示位置）：

<body>
<div class="sidebar">CONTENT IN SIDEBAR</div>
<div class="menu">CONTENT IN TOP MENU</div>
<div class="bottom_menu">CONTENT IN BOTTOM MENU</div>
<div class="content">CONTENT IN CONTENT</div>
</body>

完成CSS

@charset "UTF-8";
/* CSS Document */

img {
    border-style: none;
    color: #FFF;
    text-align: center;
}
body {
    background-color:#000;
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:100%;
    height:100%;
}
.sidebar {
    background-image:url(../images/sidebar/background.png);
    background-repeat:repeat-y;
    font: 12px Helvetica, Arial, Sans-Serif;
    color: #666;
    z-index:1;
    min-height:100%;
}
.menu {
    background-image:url(../images/top_menu/background.png);
    background-repeat:repeat-x;
    height:25px;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    top:0px;
    z-index:5;
    background-color:#000;
}
.bottom_menu {
    background-image:url(../images/bottom_menu/background.png);
    background-repeat:repeat-x;
    height:20px;
    z-index:2;
    font: 12px Helvetica, Arial, Sans-Serif;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    bottom:0px;
}
.colmask {
    position:relative;      /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
    width:100%; /* width of whole page */
    overflow:hidden;    /* This chops off any overhanging divs */
    min-height:100%;
}
.sidebar .colright {
    float:left;
    width:200%;
    position:relative;
    left:225px;
    background:#fff;
}
.sidebar .col1wrap {
    float:right;
    width:50%;
    position:relative;
    right:225px;
}
.sidebar .col1 {
    margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
    position:relative;
    right:100%;
    overflow:hidden;
}
.sidebar .col2 {
    float:left;
    width:225px;
    position:fixed;
    top:0px;
    left:0px;
    margin-top:25px;
    margin-left:5px;
    right:225px;
}
.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
}

完成的HTML：

<body>
<div class="menu">HEADER CONTENT</div>
<div class="colmask sidebar">
    <div class="colright">
      <div class="col1wrap">
            <div class="col1">
                 CONTENT
            </div>
        </div>
        <div class="col2">
            LEFT SIDEBAR CONTENT
        </div>
    </div>
</div>
<div class="bottom_menu">FOOTER CONTENT</div>
<div class="clear"></div>
</body>

Answer 1

你的意思是这样的：The 'Left Menu' 2 column Liquid Layout (Pixel-widths)？

Answer 2

CSS无法很好地处理这个问题 - 尽管可以通过 relative 轻松完成。

问题在于div只是自我意识 - 他们不能“看着我相邻的兄弟姐妹，让我的身高相同”

有很多方法可以使用大填充和负边距，尽管它们在许多方面都失败了

无法在页面锚点链接中使用。例如page.html中＃部-B
无法在旧浏览器中正确打印。
不能让元素出现在外面 - 因为它在包装容器上设置了display: hidden。

话虽如此，这是可能的，我最近已经完成了几次。弗兰克建议的网站in his answer是我去学习并正确使用它的地方。我建议检查该页面的源和CSS。 Firebug在这里可以提供很大的帮助。

当CSS属性display: table和它的朋友得到广泛支持时（IE8刚刚合并了这个），做这类事情要容易得多。

Answer 3

使用相当少的标记（包装元素和其他多余的，不明确的标签）还有另一种方法：

http://jsfiddle.net/zBLbt/23/

可能需要稍微修改才能完全跨浏览器兼容，但更简单的标记的好处超过了测试中可能的增加。

编辑：修改后的代码更具可读性。

如何根据浏览器大小创建DIV？

3 个答案: