CSS：最小高度不工作 [英] CSS: min-height does not work
问题描述
每当我添加minOheight属性到DIV，使它们100％，它不工作。我已经添加到所有的DIV，包括身高：100％;和最小高度：100％;但没有什么工作。我该怎么做，使它延伸一路？它只是剪掉了边栏的背景和内容区域的背景颜色。
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.
（忘记标记零件，白色背景的内容区域为.col1）
(Forgot to label a part. The content area with the white background is .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>
推荐答案
这是容器div紧跟在body标签之后。即使有高度CSS，它创造了问题。我删除它，并更改了一个脚本，我从渲染在该div到document.body，一切工作现在。
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.
这篇关于CSS：最小高度不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
