logo标签列表

CSS：min-height不起作用。

cssheighthtml
3
每当我在 DIV 中添加 min-height 属性使它们达到 100% 时，它不起作用。我已经将其添加到了所有的 DIV 中，包括 height: 100%; 和 min-height: 100%;，但仍然无效。我该怎么做才能让它完全延伸？它只是切掉了侧边栏的背景和内容区域的背景颜色。
（忘记标记一个部分了。白色背景的内容区域是.col1）
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%;
}
.sidebar {
    background-image:url(../images/sidebar/background.png);
    background-repeat:repeat-y;
    font: 12px Helvetica, Arial, Sans-Serif;
    color: #666;
    z-index:1;
}
.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 */
}
.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 id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
    <div class="colright">
      <div class="col1wrap">
            <div class="col1" id="contentDIV">
                Content
            </div>
        </div>
        <div class="col2">
            Sidebar Content
        </div>
    </div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
3个回答
2

已经解决。问题出在位于body标签后面的容器div上。即使添加了高度CSS，也会导致问题。我删除了它，并将之前渲染在该div中的脚本更改为document.body，现在一切都正常了。

0

如果您想让内容和侧边栏延伸到整个页面的高度，那么设置高度也不会有太大帮助。如果使用100％，则会将页脚推到页面底部，因此必须滚动才能看到它。我知道一种方法可以让您拥有具有页脚的全高度主体：粘性页脚。

请查看以下网站以获取详细信息：http://www.cssstickyfooter.com/

您可能需要另一个技巧。几乎不可能使两列具有相等的高度并支持所有浏览器。将灰色列放在左侧并使白色中心主体延伸到页脚的最简单方法是使用一个像素高度为1的图像，该图像具有正确比例的灰色和白色，并沿y轴重复背景。

CSS知识的另一个好网站是A List Apart。

我唯一不明白的是页脚和页眉只是浮动的div。它不应该影响侧边栏和内容的其他div。也许我错了，但我认为页眉和页脚现在已经很好了。 - Devin
如果您不关心拥有一个完整高度的内容区域，那么您的页眉和页脚实际上并没有任何问题......。那种粘性页脚技术是我所知道的唯一一种可以在页脚处得到完整高度内容区域的技术……而且我在使用它的这些多年中（从1990年代中期起）做了大量的CSS。 - jrista
0

使用浮动和定位在同一元素上获得一致的布局很难。特别是浮动和position:fixed（或absolute）不兼容，每个浏览器处理情况都不同。

IE6根本不支持position:fixed，将其视为position:static（默认-根本没有定位）。

1
这将是一个基于Web的应用程序，不幸的是它完全不支持IE6。它需要处理太多东西。我知道这是相当大量的用户，但是他们得到Firefox或Chrome有多困难呢？ 不到3分钟的时间就可以搞定了。 - Devin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接