Html 如何动态设置div高度值？

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

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

像这样吗

---

只需添加

float:left

到LeftContent

您应该使用jquery，在此事件中设置div的高度

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

使用calc（）

---

右侧内容也一样

您无法使用此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;}

---

我使用来自

html，正文{
保证金：0；
填充：0；
身高：100%；
}

目前，您的解决方案无法工作，这是因为网页

文档的呈现方式

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

100px (from TopContent)

+ 3px (from LeftContent)

+ 3px (from RightContent)

由于
文档
不需要大于
106px
（基于内容），因此
文档
元素的渲染值不会超过该值

要做到这一点，可以将body/htmlcss属性设置为100%的高度

使用以下CSS执行此操作：

body,html {
    height:100%;
}

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

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



以下是您的问题示例。
我建议您使用类而不是id

HTML

希望这能帮助你！（请参阅更多内容）
您的小提琴看起来比他的小提琴更好，但OP要求
左
和
右
divs的高度为页面的高度。jQuery或Javascript在这个问题中没有被标记。@Nunners，我认为这不是问题：）用户经常忘记使用正确的标记。。。如果答案提供了一个解决方案（不是在这种情况下，而是一般情况下），那么这样做是可以的，因此您将始终得到一个与
TopContent
一样高的垂直滚动，这显然不是HTML所需要的，您有垂直滚动。这是不正确的。如果在parrent div（）的每个块高度上添加内容，则不会更改。如果使用backgrond进行此div，则不会拉伸。。。这是一个糟糕的答案，也是不正确的implementation@Anon垂直滚动如OP所示（“LeftContent和RightContent高度延伸页面的末尾”）。我想你应该先看看OP想要什么，然后再决定这是否正确。。。它已经被接受为一个答案，因此=正确。没有巨大页面高度的垂直滚动是不可接受的。我想OP想要的是块高度=页面高度。你的代码很难。
100px (from TopContent)

+ 3px (from LeftContent)

+ 3px (from RightContent)

body,html {
    height:100%;
}

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

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

*{
  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;
}