如何动态设置 div 高度值？答案

【问题标题】：How to set div height value dynamically?如何动态设置 div 高度值？
【发布时间】：2013-10-21 21:43:08
【问题描述】：

我有一个 HTML 页面，包含 3 个 div，如下所示： Link

<div style="min-height:100%;">
        <div id="TopContent" style="display: inline-block; height: 100px; width: 100%; background-color: #CCDEBB;">
        </div>

        <div id="LeftContent" style="display: inline-block; width: 25%; border: 3px solid #DFE8F6;">

                </div>             

        <div id="RightContent" style="border: 3px solid #b8cfee; display: inline-block; float: right; width: 72%;">


        </div>

            </div>

我想根据页面高度值设置 LeftContent 和 RightContent 的高度值。我的意思是 LeftContent 和 RightContent 高度延伸到页面的末尾。

【问题讨论】：

标签： html asp.net css

【解决方案1】：

使用 calc();

#LeftContent{
float:left;
margin-right:3px;
height:calc(100% - 100px); //-100px because height of top bar is 100px

}

正确的内容也一样

【讨论】：

【解决方案2】：

你不能用这个 HTML 控制高度，但是你可以用 :before/:after 元素来模拟这个效果：

#LeftContent:after,
#RightContent:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:9999px;
    z-index:-1;
    background:#DFE8F6;
}
#RightContent:after{background:#b8cfee;}

http://jsfiddle.net/EhnhZ/

【讨论】：

【解决方案3】：

我建议你使用类而不是 id。

HTML

<div class="content top"></div>
<div class="content left"></div>
<div class="content right"></div>

CSS

*{
  height:100%;
  width:100%;
  margin:0;
} /* instead of HTML and BODY attributes */

.content{
  display:inline-block;
  margin-right:-4px; /*to margin left div with the right one!*/
  margin-top:-4px; /*to margin left and right divs with the top one!*/
}

.left{
  height:calc(100% - 200px); /*use calc(100% - "top div height" */
  width:50%; /*choose your own width*/
  background-color:red;
}

.right {
  height: calc(100% - 200px); /*use calc(100% - "top div height" */
  width:50%; /*choose your own width*/
  background-color:green;
}

.top{
  width:100%;
  height:200px;
  background-color:blue;
}

希望对您有所帮助！（在http://codepen.io/utopy/pen/zcyti 上查看更多信息）

【讨论】：

【解决方案4】：

喜欢这个demo？

只需将 float: left; 添加到 LeftContent

【讨论】：

你的小提琴看起来比他的好，但 OP 要求将 Left 和 Right div 的高度作为页面的高度。

【解决方案5】：

我使用来自this question的答案构建了我的答案

<style>
    html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>

<div style="min-height:100%;height:100%;">
    <div id="TopContent" style="height: 100px; width: 100%; background-color: #CCDEBB;">
    </div>

    <div id="LeftContent" style="min-height:100%;width: 25%; border: 3px solid #DFE8F6;float:left">    
    </div>             

    <div id="RightContent" style="min-height:100%;border: 3px solid #b8cfee; width:72%;float:right">
    </div>
</div>

【讨论】：

有了这个 HTML，你就有了垂直滚动。这是不正确的。如果您在父 div (
) 的每个块高度上添加内容，则不会更改。如果为此 div 使用背景，则它不会拉伸。 jsfiddle.net/YDtgU ...这是一个糟糕的答案和不正确的实现
@Anon 垂直滚动是 OP 要求的（“LeftContent 和 RightContent 高度延伸到页面的末尾”）。我认为您应该在决定这是否不正确之前阅读 OP 想要的内容......因此它已被接受为答案 = 正确。
没有大页面高度的垂直滚动是不可接受的。我认为OP想要那个块高度=页面高度。你的代码很难。

【解决方案6】：

目前您的解决方案将不起作用，这是因为网页 documents 的呈现方式。

目前，从您的 HTML 来看，您当前的文档高度如下：

100px (from TopContent)

+ 3px (from LeftContent)

+ 3px (from RightContent)

因为document 不需要大于106px（基于内容），所以document 元素将不会呈现更多。

您可以通过将 body/html CSS 属性设置为 100% 的高度来解决此问题。

使用以下 CSS 来执行此操作：

body,html {
    height:100%;
}

您还需要将容器 div 的高度设置为

<div style="height:100%;">

这是一个JSFiddle 的示例，用于解决您的问题。

【讨论】：

因此，您将始终获得与 TopContent 一样高的垂直滚动条，这显然是不需要的

【解决方案7】：

你应该使用jquery，在这个事件中设置div的高度

$(window).resize(function () {
 $('#LeftContent').css('height',$(window).height());
 $('#RightContent').css('height',$(window).height());
        });

【讨论】：

jQuery 或 Javascript 未在此问题中标记。
@Nunners，我想说这不是问题 :) 用户经常忘记使用正确的标签......如果答案提供了解决方案（不是在这种情况下，但通常是）可以这样做，imo