放<div>到浏览器窗口底部的高度
[英]Set <div> Height to Bottom of Browser Window
问题描述
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 .最终，我的目标是使用overflow-x: auto使这个<div>可滚动。 But I must have a fixed height in order for that to work.但是我必须有一个固定的高度才能使它起作用。
7 个解决方案
解决方案1
9 已采纳 2013-03-22 16:45:52
您必须在这里使用 javascript - 当 dom 准备好时，将内容的高度设置为窗口的高度 - 标题的高度
$('#content').height($(window).height() - $('#header').height());
解决方案2
4 2013-03-22 17:18:20
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'));
});
});
解决方案3
2 2013-03-22 22:34:27
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);
}
解决方案4
1
http://jsbin.com/ihemus/3/ http://jsbin.com/ihemus/3/
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%
}
SOLVED using table: http://jsbin.com/ihemus/15/使用表解决： http : //jsbin.com/ihemus/15/
table{
height:100%;
width:100%;
}
html,body{
height:100%;
}
解决方案5
0 2013-03-22 16:42:58
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);
解决方案6
0 2020-05-06 05:14:46
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>
解决方案7
-1
Give your header and sidebar a fixed positioning.给你的标题和侧边栏一个固定的位置。 Then your content will automatically scroll without header and sidebar.然后您的内容将自动滚动而没有标题和侧边栏。
Can it be a solution?它可以是一个解决方案吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.