3

每当我将 min0height 属性添加到 DIV 以使它们 100% 时，它都不起作用。我已将它们添加到所有 DIV 中，包括 height: 100%; 最小高度：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>
4

3 回答 3

2

固定的。它是body标签之后的容器div。即使使用高度 CSS，它也会产生问题。我删除了它，并将我在该 div 中渲染的脚本更改为 document.body，现在一切正常。

于 2009-06-06T03:35:05.453 回答
0

如果你试图让你的内容和侧边栏延伸到页面的整个高度，那么设置一个高度并没有真正的帮助。如果你使用 100%，你会把你的脚从页面底部推开，所以你必须滚动才能看到它。我知道有一种方法可以让你拥有一个带页脚的全高正文：Sticky Footer

详情请查看以下网站：http ://www.cssstickyfooter.com/

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

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

于 2009-06-06T03:02:43.240 回答
0

在相同元素上使用浮动和定位很难获得一致的布局。特别是浮动和位置：固定（或绝对）是不兼容的，每个浏览器处理情况不同。

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

于 2009-06-06T03:47:37.017 回答