3

我正在尝试制作一个带有 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 代码：

<!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 代码：

<!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 代码：

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。

4

5 回答 5

2

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>

于 2013-06-25T09:00:12.033 回答
1

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

这将是这样的：

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

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

我不知道这是否正是你想要的，但你不能让一个 div 只是“填充剩余空间”而不使其成为绝对。你也不是真的想要什么。

于 2013-06-25T08:48:08.623 回答
0

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

就在这里。它被称为box-sizing

阅读本文以获取有关 box-sizing 属性的更多信息。

小提琴

所以如果你的标题是 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>

于 2013-06-25T08:47:37.167 回答
0

尝试这个：

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

CSS：

   html,body{
      height:100%;
      Padding:0; 
      margin:0;
      border:0;}
于 2013-06-25T08:35:28.297 回答
0

由于两个 Div 都使用 html 和 body 标签上设置的 100% 高度，您只需将其设置在那里，然后将边距和填充归零。一般来说，如果你必须将一个 div 和它的父 div 都设置为 100% 的高度，你就做得过火了。

于 2013-06-25T08:48:20.397 回答