将div块设置为100％的高度 [英] Set div block to 100% height
本文介绍了将div块设置为100％的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这样的标记：
i have markup like this:
<html>
<body>
<div class="page">
<div class="top_menu">
some text
</div>
<div class='header'>
menu
</div>
<div class="main">
<div class="left_sidebar">
left
</div>
<div class="content">
left
</div>
<div class="right_sidebar">
right
</div>
</div><!-- main div -->
</div> <!-- page div -->
</body>
</html>
我需要设置块 .main 为100％的页面高度，这是我的CSS：
I need to set block .main to 100% page height, this is my css:
html {
height: 100%;
}
body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.page {
height: 100%;
min-height: 100%;
background-color: white;
margin: 0 auto;
padding: 0;
width: 1084px;
}
.main {
width: 1084px;
height: 100%; // not working
}
.left_sidebar {
float: left;
max-width: 197px;
height: auto;
}
.content {
width: 517px;
float: left;
}
.right_sidebar {
width: 359px;
float: right;
}
现在文字在 .main 显示在块之外，在Chrome中，我可以看到这个块的宽度是1084，但高度是0.我知道这个问题已经被问到了，但我想我错过了一些东西。
Right now text inside .main shown beyond the block and in Chrome i can see that width of this block is 1084 but height is 0. I know maybe this issue has already been asked, but i think i missed something.
通过互联网搜索尝试此解决方案，没有为我工作
Searched over internet tried this solution, did not worked for me
推荐答案
请尝试使用 http://jsfiddle.net/7cZMh/2/
HTML
<html>
<body>
<div class="page">
<div class="top_menu">
some text
</div>
<div class='header'>
menu
</div>
<div class="main">
<div class="left_sidebar">
left
</div>
<div class="content">
left
</div>
<div class="right_sidebar">
right
</div>
</div><!-- main div -->
</div> <!-- page div -->
</body>
</html>
CSS
CSS
html{
min-height: 100%;
position: relative;
}
body{
height: 100%;
overflow: hidden; // hide overflow
}
.page{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: maroon;
}
.main {
height: 100%;
background: black;
overflow: auto; // restore overflow
}
糟糕，忘记了这个。
Oops, forgot this.
.left_sidebar {
float: left;
max-width: 197px;
height: auto;
}
.content {
width: 517px;
float: left;
}
.right_sidebar {
width: 359px;
float: right;
}
这篇关于将div块设置为100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
