相对 div 高度

Posted 2023-03-06

【中文标题】相对 div 高度

【英文标题】：Relative div height

【发布时间】：2013-10-06 00:21:34

【问题描述】：

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

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

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

#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>

显然，使用高度的百分比值是行不通的。为什么会这样？

【问题讨论】：

请提供小提琴..

【参考方案1】：

将此添加到您的 CSS：

html, body

    height: 100%;

working Fiddle

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

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

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

*

    padding: 0;
    margin: 0;

禁用它。

看That Fiddle

【讨论】：

简单的改变，但非常有效！实际上，我确定了身体的高度，但忘记了 html 元素。非常感谢！

【参考方案2】：

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

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 及更高版本。作为 Fallback，您可以使用 JavaScript。

【参考方案3】：

将此添加到您的 CSS：

html, bodyheight: 100%

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

解释：

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

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

【参考方案4】：

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

看到这个： percentage in height doesn’t work?

【参考方案5】：

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

【参考方案6】：

基本上，问题出在第 12 块。为了让 block1/2 占据 block12 的总高度，它必须有一个定义的高度。 This stack overflow post 非常详细地解释了这一点。

因此，为 block12 设置定义的高度将允许您设置适当的高度。我创建了an example on 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%;

    
 #clearclear:both;
 #block3
    position:absolute;
    bottom:0;
    color:blue;
    height:40%;