Question

虽然看起来应该有办法做到这一点，但我开始怀疑没有。

我的内容<div>位于我的页面上。

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

我想要做的是设置内容<div>的高度，使得底部等于浏览器窗口的底部。

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

Ulimately，我的目标是使用<div>使overflow-x: auto可滚动。但我必须有一个固定的高度才能使它发挥作用。

Answer 1

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

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

Answer 2

由于缺乏信息，如标题的高度固定，或者是否存在可能导致问题的其他动态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'));
    });

});

Answer 3

这是一个纯粹的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);
}

Answer 4

http://jsbin.com/ihemus/3/

这样可以吗？

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

使用表格

已解决： http://jsbin.com/ihemus/15/

table{
  height:100%;
  width:100%;
}
html,body{
  height:100%;
}

Answer 5

尝试在内容div中添加一个类或样式=“min-height：100％”，我认为它会起作用。

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

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

Answer 6

var height = height_of_section('div');
document.getElementById('div').style.height = height;

function height_of_section(id)
{
    // elemet position on the window
    var element_position= document.getElementById(id).getBoundingClientRect().top;
    // window scroll y value from top
    var window_scroll = window.scrollY;
    var calc = window_scroll + element_position; 
    return 'calc(100vh - ' + calc + 'px - 40px)';
};

#div{
  width: 100px;
  border: 1px solid;
}

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

  <div id="div"></div>

</body>
</html>

Answer 7

为标题和侧边栏指定固定位置。然后您的内容将自动滚动，不带标题和侧边栏它可以成为解决方案吗？

将<div>高度设置为浏览器窗口的底部</div>

7 个答案: