18

我想把视图分成四个部分。顶部的标题，使用整页宽度和固定高度。

剩下的页面被分成两个相同高度的块，它们的上部包含两个彼此相邻的相同大小的块。

我尝试的是（没有标题）：

#wrap {
  width: 100%;
  height: 100%;
}

#block12 {
  width: 100%;
  max-height: 49%;
}

#block1,
#block2 {
  width: 50%;
  height: 100%;
  float: left;
  overflow-y: scroll;
}

#block3 {
  width: 100%;
  height: 49%;
  overflow: auto;
  /*background: blue;*/
}

.clear {
  clear: both;
}

<div id="wrap">
  <div id="block12">
    <div id="block1"></div>
    <div id="block2"></div>
    <div class="clear"></div>
  </div>
  <div id="block3"></div>
</div>

显然，使用高度的百分比值不会那样工作。为什么呢？

4

6 回答 6

23

将此添加到您的CSS：

html, body
{
    height: 100%;
}

工作小提琴

当你说 to wrapbe时100%，100% 是什么？它的父母（身体），所以他的父母必须有一些高度。

body他的父母也是如此html。html父视口..因此，通过将它们都设置为 100%，wrap也可以具有百分比高度。

另外：元素有一些默认的填充/边距，这会导致它们的跨度比您应用到它们的高度多一点。（导致滚动条）你可以使用

*
{
    padding: 0;
    margin: 0;
}

禁用它。

看看那个小提琴

于 2013-09-30T08:09:42.757 回答
7

当您在父元素未设置高度的元素上设置百分比高度时，父元素具有默认值

height: auto;

您要求浏览器根据未定义的值计算高度。由于这将等于一个空值，结果是浏览器对子元素的高度不做任何事情。

除了使用 JavaScript 解决方案之外，您还可以使用这种极其简单的表格方法：

#parent3 {
    display: table;
    width: 100%;
}

#parent3 .between {
    display: table-row;
}

#parent3 .child {
    display: table-cell;
}

在http://jsbin.com/IkEqAfi/1上预览

  • 示例 1：不工作
  • 示例 2：固定高度
  • 示例 3：表格方法

但是：请记住，表格方法仅适用于所有现代浏览器和 Internet Explorer 8 及更高版本。作为后备，您可以使用 JavaScript。

于 2013-09-30T10:28:20.373 回答
3

将此添加到您的CSS：

html, body{height: 100%}

并将最大高度更改#block12为height

说明：

基本上#wrap是 100% 高度（相对度量），但是当您使用相对度量时，它会查找其父元素的度量，并且它通常是未定义的，因为它也是相对的。唯一能够使用相对高度的元素是body和/或html它们本身取决于浏览器，其余元素需要具有绝对高度的父元素。

但是要小心，使用相对高度很棘手，您必须正确计算标题的高度，以便可以从其他元素的百分比中减去它。

于 2013-09-30T08:11:43.750 回答
2

宽度百分比有效，但高度百分比无效，除非您为依赖循环中的任何父项指定特定高度...

看到这个： 身高百分比不起作用？

于 2013-09-30T08:11:13.160 回答
0

基本上，问题出在block12上。为了让 block1/2 占据 block12 的总高度，它必须有一个定义的高度。这个堆栈溢出帖子非常详细地解释了这一点。

因此，为 block12 设置定义的高度将允许您设置适当的高度。我在 JSfiddle 上创建了一个示例，它将向您展示如果 block12 div 设置为整个页面的标准高度，则块可以彼此相邻浮动。

这是一个示例，包括标题和 block3 div，其中包含一些内容。

#header{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:20%;
    }

    #block12{
    position:absolute;
    top:20%;
    width:100%;
    left:0;
    height:40%;
    }
    #block1,#block2{
    float:left;
    overflow-y: scroll;
    text-align:center;
    color:red;
    width:50%;
    height:100%;

    }
 #clear{clear:both;}
 #block3{
    position:absolute;
    bottom:0;
    color:blue;
    height:40%;

    }
于 2013-09-30T09:26:13.900 回答
0

div 采用其父级的高度，但由于它没有内容（除了您的 div），它只会与它的内容一样高。

你需要设置body和html的高度：

HTML：

<div class="block12">
    <div class="block1">1</div>
    <div class="block2">2</div>
</div>
<div class="block3">3</div>

CSS：

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.block12 {
    width: 100%;
    height: 50%;
    background: yellow;
    overflow: auto;
}
.block1, .block2 {
    width: 50%;
    height: 100%;
    display: inline-block;
    margin-right: -4px;
    background: lightgreen;
}
.block2 { background: lightgray }
.block3 {
    width: 100%;
    height: 50%;
    background: lightblue;
}

还有一个JSFiddle

于 2013-09-30T08:16:45.023 回答