CSS：最小高度不起作用

StackOverflow https://stackoverflow.com/questions/958888

  •  12-09-2019
  •  | 
  •  

题

每当我的min0height属性添加到的DIV，使他们100％，这是行不通的。我已经将它们添加到所有的DIV，其中包括高度：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>
有帮助吗？

解决方案

固定。 这是body标签后div容器权利。即使有高度的CSS，它造成的问题。我删除，并改变了剧本我从该div到document.body的渲染了，一切工作了。

其他提示

如果你想使你的内容和侧边栏拉伸页面的整个高度，则没有设置高度是真的要帮助的量。如果你用了100％，你去把你的fotter关闭页面的底部，所以你必须滚动才能看到它。还有，我知道的，让你有一个完整的高体与页脚一个方法：置顶页脚

检查细节以下网站： http://www.cssstickyfooter.com/

还有一个窍门，你可能会需要。这几乎是不可能拿到两列具有相等的高度，并支持所有浏览器。让你的灰柱的左侧和白人中锋的身体一路延伸到页脚最简单的方法是使用了灰色，并在适当的比例白1像素HIGHT的形象，这是背景重复沿y轴。

有关CSS知识的另一个伟大的网站是列表除了。

这是很难得到使用上相同的元件的浮纱和定位一个洽布局。特别是浮动和位置是：固定（或绝对值）是不相容的，每个浏览器不同的方式处理的情况

。

IE6不支持位置：固定在所有并将其作为位置：静态（默认 - 没有定位在所有）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top