6

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

<div>我的页面上某处有一个内容。

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

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

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

最后，我的目标是<div>使用overflow-x: auto. 但我必须有一个固定的高度才能让它工作。

4

7 回答 7

9

您必须在此处使用 javascript - 当 dom 准备好时，将内容的高度设置为窗口的高度 - 标题的高度

$('#content').height($(window).height() - $('#header').height());
于 2013-03-22T16:45:52.623 回答
4

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

});
于 2013-03-22T17:18:20.253 回答
2

这是一个纯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);
}
于 2013-03-22T22:34:27.530 回答
1

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%;
}
于 2013-03-22T16:54:59.737 回答
0

尝试在内容 div 中添加一个类或 style="min-height:100%"，我认为它会起作用。

使用 JS，假设您的内容的 div 具有 id="content" 和标题 id="header"，所以在 jquery 中，您可以这样做：

$("#content").css("height",$(window).height()-$("#header").height);
于 2013-03-22T16:42:58.143 回答
0 

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>

于 2020-05-06T05:14:46.390 回答
-1

给你的标题和侧边栏一个固定的位置。然后您的内容将自动滚动，没有标题和侧边栏。
它可以成为一个解决方案吗？

于 2013-03-22T17:02:53.030 回答