我的CSS有100％的高度问题。我已经搜索了许多教程以及解决方案，但我似乎无法得到我想要的结果。我所拥有的是侧栏和主栏，其中将放置内容。
由于内容的主要列延伸，我希望侧边栏的背景也可以伸展。但我得到的是侧边栏的背景一直停留在一个点上并且它不会一直向下。
黑色背景是我的侧栏，内容似乎一直溢出。
我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS 100% Height</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<div id="page">
<div id="sidecolumn">
</div>
<div id="maincolumn">
<div id="content">
contents
</div>
</div>
</div>
</body>
</html>
CSS
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#content {
background: #EEE;
font: 1.5em arial, verdana, sans-serif;
min-height: 100%;
}
#sidecolumn {
width: 500px;
height: 100%;
background: #000;
float: left;
}
#maincolumn {
height: 100%;
}
#page {
height: 100%;
}
我看到并尝试了http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
您可以通过display:table-cell财产实现您的期望。
首先将display:table定义为您的父div，然后将display:table-cell定义为您的子div，然后两个div将垂直相等。
更新了css
#content {
background: #EEE;
font: 1.5em arial, verdana, sans-serif;
display: table-cell;
}
#sidecolumn {
width: 500px;
background: #000;
display:table-cell;
}
#maincolumn {
height: 100%;
}
#page {
height: 100%;
display:table;
}
使用定位来定位侧栏和主栏。 。 。
#sidecolumn {
position:relative;
top: 0px;
left:0px;
width: 100px;
height: 100%;
background: #000;
float: left;
}
#maincolumn {
position: relative;
left: 101px;
height: 100%;
}
使用相等的高度函数
jQuery的
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".eheight));
});
HTML
<body>
<div id="page">
<div id="sidecolumn eheight">
</div>
<div id="maincolumn eheight">
<div id="content">
contents
</div>
</div>
</div>
</body>