Question

我正在尝试制作一个包含2个div的html页面：“top”和“main”

顶部<div>必须取代其中包含的元素，主<div>必须占据所有剩余的位置。

以下是我的尝试：

CSS代码：

html,body{
  height:100%;
}

#top{
  background-color : red;
  padding:10px;
  border:1px solid;
}

#main{
  background-color : blue;
  height:100%;
  padding:10px;
  border:1px solid;
}

#content1{
  background-color:yellow;
}

#content2{
  background-color:yellow;
  height :100%;
}

HTML CODE：

<!DOCTYPE html>
<html>
  <head></head>
  <body>

    <div id="top">
      <div id="content1">content1</div>
    </div>

    <div id="main">
      <div id="content2">content2</div>
    </div>

  </body>

</html>

以下是jsFiddle

正如您所看到的，我在“content2”上设置的“100％”会导致此div占用页面高度的100％而不是剩余的空间。是否有一个神奇的css属性来解决这个问题？

修改

感谢您提供所有解决方案。

我最终选择了Riccardo Pasianotto基于CSS属性display:table和display:table-row提出的解决方案。

以下是我的最终 HTML CODE ：

<!DOCTYPE html>
<body>
  <div id="content1" class="row">
    <div class="subcontent">
      <div class="subContentContainer">
         content1
      </div>
    </div>
  </div>
  <div id="content2" class="row">
    <div class="subcontent">
      <div class="subContentContainer">
        content2
      </div>
    </div>
  </div>    
</body>

以下是相应的 CSS CODE ：

html,body{
  padding:0;
  margin:0;
  height:100%;
  width:100%;
}

body{
  display:table;
}

.row{
  display:table-row;
  width:100%;
}

#top{
  height:100px;
}

#content1{
  background:#aa5555;
  padding:10px;
}

#content2{
  background:#5555AA;
  height:100%;
}

.subcontent{
  padding : 10px;
  height:100%;
}

.subContentContainer{
  background-color:yellow;
  height:100%;
}

这是相应的Jsfiddle。

Answer 1

<强> DEMOJF

为此，您必须使用display:table，以便以这种方式进行编辑

html,
body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
}
.row {
  display: table-row;
  width: 100%;
  background: red;
}
#top {
  height: 100px;
}
#content1 {
  background: yellow;
  height: 100%;
}
#content2 {
  overflow: scroll;
  height: 100%;
  border: 1px solid black;
}

<body>

  <div id="top" class="row">
    <div id="content1">content1</div>
  </div>

  <div id="main" class="row">
    <div id="content2">content2</div>
  </div>

</body>

Answer 2

我经常做的是制作一个没有填充到min-height: 100%的容器，让我的内容有适当的高度（自动）：

这将是这样的：

#container {
    background-color : #5555AA;
    min-height: 100%;
}
#content2 {
    background-color:yellow;
    margin: 10px;
}

http://jsfiddle.net/5cEdq/25/

我不知道这是否正是你想要的，但是你不能仅仅在“填充再生空间”而不是绝对的情况下制作div。你真的不想要什么。

Answer 3

试试这个：

http://jsfiddle.net/5cEdq/16/

CSS：

   html,body{
      height:100%;
      Padding:0; 
      margin:0;
      border:0;}

Answer 4

是否有一个神奇的css属性来解决这个问题？

是的。它被称为box-sizing

阅读this article，了解有关box-sizing属性的更多信息。

<强> FIDDLE

因此，如果你的标题是64px高，那么你会做这样的事情：

 .container {
   height: 100%;
   background: pink;
   margin-top: -64px;
   padding-top: 64px;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

<header>header</header>
<div class="container">
  <div class="content">
    content here
  </div>
</div>

Answer 5

由于两个Div都在html和body标签上使用100％高度设置，因此您只需将其设置在那里，然后将边距和填充归零。通常，如果你必须将div和它的父div都设置为100％高度，你就会过度。

HTML高度100％导致页面溢出

5 个答案: