CSS：min-height不起作用

Whenever I add the min0height property to the DIVs to make them 100%, it doesn't work. I have added them to all of the DIVs, including height: 100%; and min-height: 100%; but nothing works. What would I do to make it extend all the way? It just cuts off the background of the sidebar and the background color of the content area.

每当我将min0height属性添加到DIV以使它们100%时,它就不起作用。我已将它们添加到所有DIV中,包括高度:100%;和最小高度:100%;但没有任何作用。我该怎么做才能让它一路延伸?它只是切断了侧边栏的背景和内容区域的背景颜色。

CSS：min-height不起作用

(Forgot to label a part. The content area with the white background is .col1)

(忘了标记部件。白色背景的内容区域是.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 个解决方案

#1

Fixed. It was the container div right after the body tag. Even with height CSS, it created problems. I removed it and changed a script I had from rendering in that div to the document.body and everything works now.

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

#2

If you are trying to make your content and sidebar stretch the entire height of the page, then no amount of setting a height is really going to help. If you use 100%, your going to push your fotter off the bottom of the page so you have to scroll to see it. There is a single method that I know of that will allow you to have a full-height body with a footer: Sticky Footer

如果您试图让您的内容和侧边栏拉伸整个页面的高度,那么设置高度的数量确实无济于事。如果你使用100%,你将把你的fotter推离页面底部,所以你必须滚动才能看到它。我知道有一种方法可以让你拥有一个带有页脚的全高身体:粘性页脚

Check the following site for details: http://www.cssstickyfooter.com/

有关详细信息,请访问以下网站:http://www.cssstickyfooter.com/

Another trick you will probably need. It is near impossible to get two columns to have equal height and support all browsers. The simplest way to get your gray column to the left and white center body to stretch all the way to the footer is to use a 1-pixel hight image that has gray and white in the proper proportions, which is background-repeated along the y axis.

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

Another great site for CSS knowledge is A List Apart.

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

#3

It is hard to get a consistant layout using floats and positioning on the same elements. In particular float and position:fixed (or absolute) are incompatible and each browser handles the situation differently.

使用浮动和定位在相同元素上很难获得一致的布局。特别是浮点数和位置:固定(或绝对)是不兼容的,每个浏览器以不同的方式处理情况。

IE6 does not support position:fixed at all and treats it as position:static (the default - no positioning at all).

IE6不支持position:fixed at fixed并将其视为position:static(默认 - 根本没有定位)。

#1

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

#2

Check the following site for details: http://www.cssstickyfooter.com/

有关详细信息,请访问以下网站:http://www.cssstickyfooter.com/

Another great site for CSS knowledge is A List Apart.

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

#3

使用浮动和定位在相同元素上很难获得一致的布局。特别是浮点数和位置:固定(或绝对)是不兼容的,每个浏览器以不同的方式处理情况。

IE6 does not support position:fixed at all and treats it as position:static (the default - no positioning at all).

IE6不支持position:fixed at fixed并将其视为position:static(默认 - 根本没有定位)。

秒客网

CSS：min-height不起作用

3 个解决方案

#1

#2

#3

#1

#2

#3

相关文章