将div块设置为100％的高度

本文介绍了将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

推荐答案

请尝试使用

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

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％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！