CSS：min-height不起作用
[英]CSS: min-height does not work
问题描述
Whenever I add the min0height property to the DIVs to make them 100%, it doesn't work. 
每当我将min0height属性添加到DIV以使它们100％时，它都不起作用。 I have added them to all of the DIVs, including height: 100%; 我已将它们添加到所有DIV中，包括高度：100％; and min-height: 100%; 和最小高度：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. 它只是切断了侧边栏的背景和内容区域的背景颜色。
(Forgot to label a part. The content area with the white background is .col1) （忘了标记部件。白色背景的内容区域是.col1）
CSS: 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 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
2 已采纳 2009-06-06 03:35:05
Fixed. 固定。 It was the container div right after the body tag. 它是身体标签后面的容器div。 Even with height CSS, it created problems. 即使使用高度CSS，它也会产生问题。 I removed it and changed a script I had from rendering in that div to the document.body and everything works now. 我删除它并将我从该div中渲染的脚本更改为document.body，现在一切正常。
解决方案2
0 2009-06-06 03:02:43
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. 如果你使用100％，你将把你的照片推离页面底部，所以你必须滚动查看它。 There is a single method that I know of that will allow you to have a full-height body with a footer: Sticky Footer 我知道有一种方法可以让你拥有一个带有页脚的全高身体：Sticky Footer
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
0 2009-06-06 03:47:37
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（默认 - 根本没有定位）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.