如何动态设置div高度值？

Answer 1

使用 calc();

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

}

正确内容也一样

Answer 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/

Answer 3

我建议你使用classes而不是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 ）

Answer 4

喜欢这个演示吗？

只需将

float: left;

添加到 LeftContent

Answer 5

我使用这个问题

的答案构建了我的答案

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

Answer 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。

Answer 7

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

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