Javascript 设置<；部门>；到浏览器窗口底部的高度

虽然似乎应该有办法做到这一点，但我开始怀疑没有

我的页面上有一个内容

+---------------------------+
| Header                    |
+---------------------------+
|         |                 |
| Sidebar | Content         |
|         |                 |
|         |                 |
|         |                 |
+---------+-----------------+

我想做的是设置内容的高度

，使底部与浏览器窗口的底部相等

我知道我可以用绝对定位来做到这一点。但是，在现有布局中是否没有办法做到这一点？如果唯一的方法是使用JavaScript/jQuery，那么我很想看看这是如何实现的

---

实际上，我的目标是使用

overflow-x:auto

使此

可滚动。但是我必须有一个固定的高度才能工作。

尝试在content div中添加一个类或style=“minheight:100%”，我认为它会工作

使用JS，我们假设您的内容的div具有id=“content”和header id=“header”，因此在jquery中，您可以这样做：

$("#content").css("height",$(window).height()-$("#header").height);

---

您必须在这里使用javascript—当dom准备就绪时，将内容的高度设置为窗口的高度—标题的高度

$('#content').height($(window).height() - $('#header').height());

这样行吗

html,body{
  height:100%;
  display:block;
}
#sidebar{
  background-color:orange;
  width: 20%;
  float:left;
  height: 100%
}
#content{
  background-color:gold;
  height: 100%
}

---

使用表格解决：

---

给你的标题和边栏一个固定的位置。 然后，您的内容将自动滚动，无需标题和侧边栏。

---

这可能是一个解决方案吗？

因为缺少信息，例如收割台高度是否固定，或者是否存在其他可能导致问题的动态div，一个解决方案可能有效

$(function () {
    "use strict";
    var resizeDiv = function (object) {
        object.height($(window).height() - $('#header').height());
    };


    $(window).ready(function () {
        resizeDiv($('#content'));
    });

    $(window).bind("resize", function () {
        resizeDiv($('#content'));
    });

});

---

下面是一个纯css解决方案：

html,body{
  height:100%;
}

#content{
  //assuming that 80px is the header's height
  height: -moz-calc(100% - 80px);
  height: -webkit-calc(100% - 80px);
  height: calc(100% - 80px);
}

var height=u段（“div”）的高度；
document.getElementById（'div'）。style.height=高度；
_段的功能高度_（id）
{
//窗口上的elemet位置
var element_position=document.getElementById（id）.getBoundingClientRect（）.top；
//窗口从顶部滚动y值
var window_scroll=window.scrollY；
var calc=窗口滚动+元素位置；
返回“计算（100vh-”+计算+“px-40px）”；
};
#div{
宽度：100px；
边框：1px实心；
}

页面标题
不，这不起作用。这里，100%指的是容器元素的高度，而不是浏览器窗口的高度。min-height表示容器高度的最小100%。。。因此，页眉占用一些空间会使其比视口更大。您好，昨天我为您提供了一个完整的解决方案：绝对定位有什么问题？什么是“现有布局”？当纯CSS可以解决这个问题时，为什么“唯一的方法”是使用Javascript？将高度设置为100%？…我有一个不使用绝对定位的现有布局。因此，这种方法需要我重构整个网站的布局。我很想避免这种情况。如果我可以在纯CSS中这样做，那么我很高兴不使用JavaScript或jQuery。如果你的页面变大了怎么办。@silentboy:你是在问如果浏览器窗口的大小被调整了会发生什么？如果是这样，这似乎是一个合适的问题。页面本身不会增长。非常有趣。我需要一些时间来看看这个。我已经厌倦了负边距，以隐藏滚动条，但没有得到好的结果。。。（你可以使用隐藏的滚动条）谢谢你，但是使用
还是需要修改我的整个网站布局。因此，表格布局并不是我真正的选择。
html,body{
  height:100%;
}

#content{
  //assuming that 80px is the header's height
  height: -moz-calc(100% - 80px);
  height: -webkit-calc(100% - 80px);
  height: calc(100% - 80px);
}