javascript 将 <div> 高度设置为浏览器窗口的底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15575564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set <div> Height to Bottom of Browser Window
提问by Jonathan Wood
While it seems there should be a way to do this, I'm starting to suspect there is not.
虽然似乎应该有办法做到这一点，但我开始怀疑没有。
I have a content <div>located somewhere on my page.
<div>我的页面上有一个内容。
+---------------------------+
| Header |
+---------------------------+
| | |
| Sidebar | Content |
| | |
| | |
| | |
+---------+-----------------+
What I would like to do is set the height of the content <div>such that the bottom is equal to the bottom of the browser window.
我想要做的是设置内容的高度<div>，使底部等于浏览器窗口的底部。
I know I can do this with absolute positioning. But is there no way to do this within an existing layout? If the only way is with JavaScript/jQuery, then I'd be interested to see how that might be accomplished.
我知道我可以通过绝对定位来做到这一点。但是在现有布局中没有办法做到这一点吗？如果唯一的方法是使用 JavaScript/jQuery，那么我很想看看如何实现。
Ulimately, my goal here is to make this <div>scrollable using overflow-x: auto. But I must have a fixed height in order for that to work.
最终，我的目标是<div>使用overflow-x: auto. 但是我必须有一个固定的高度才能使它起作用。
回答by Adidi
You must use javascript here - when the dom is ready set the height of the content to be height of the window - height of the header
您必须在此处使用 javascript - 当 dom 准备好时，将内容的高度设置为窗口的高度 - 标题的高度
$('#content').height($(window).height() - $('#header').height());
回答by hyde
Because of lack informations, like is the height of header fixed, or are there other dynamic divs which could cause problems, one solution which maybe works.
由于缺乏信息，例如标题的高度固定，或者是否有其他可能导致问题的动态 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'));
});
});
回答by hjuster
Here is a pure css solution:
这是一个纯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);
}
回答by hjuster
Is this OK?
这个可以吗？
html,body{
height:100%;
display:block;
}
#sidebar{
background-color:orange;
width: 20%;
float:left;
height: 100%
}
#content{
background-color:gold;
height: 100%
}
SOLVEDusing table: http://jsbin.com/ihemus/15/
使用表解决：http: //jsbin.com/ihemus/15/
table{
height:100%;
width:100%;
}
html,body{
height:100%;
}
回答by Charaf JRA
try in the content div to add a class or a style="min-height:100%",i think it will work.
尝试在内容 div 中添加一个类或一个 style="min-height:100%"，我认为它会起作用。
using JS, lets assume that your content's div has the id="content" and header the id="header", so in jquery,you can do it like that :
使用 JS，假设您的内容的 div 具有 id="content" 和标题 id="header"，因此在 jquery 中，您可以这样做：
$("#content").css("height",$(window).height()-$("#header").height);
回答by Ozal Zarbaliyev
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>回答by Ozal Zarbaliyev
Give your header and sidebar a fixed positioning.
Then your content will automatically scroll without header and sidebar.
Can it be a solution?
给你的标题和侧边栏一个固定的位置。然后您的内容将自动滚动而没有标题和侧边栏。
它可以是一个解决方案吗？
