Html 如何为整个网页设置固定高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5965007/
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
How can I set a fixed height for my entire webpage?
提问by Stanley Cup Phil
I thought this was a simple fix:
我认为这是一个简单的修复：
body
{
height: 1054px;
}
html
{
height: 1054px;
}
Wouldn't this set the max height of the page to 1054px? I have also tried these workarounds but they didn't work with what I wanted:
这不会将页面的最大高度设置为1054px吗？我也尝试过这些变通方法，但它们不符合我的要求：
html
{
overflow: hidden;
}
<body><table id = "myTable"><tr><td> ..... </tr></td></body>
#myTable
{
height: 100%;
}
How do I set an absolute height for a webpage? Also I am more interested in why the bodyand htmlheightcalls wouldn't work. I do a lot of position: relativecalls, would that have an effect on it?
如何设置网页的绝对高度？此外，我对为什么body和htmlheight调用不起作用更感兴趣。我打了很多position: relative电话，这会影响它吗？
回答by lpd
widthand heightdo set absolute widths and heights of an element respectively. max-width, max-height, min-widthand min-heightare seperate properties.
width并分别height设置元素的绝对宽度和高度。max-width、max-height、min-width和min-height是单独的属性。
Example of a page with 1054px square content and a full background:
具有 1054px 方形内容和完整背景的页面示例：
html {
min-width: 100%;
min-height: 100%;
background-image: url(http://www.example.com/somelargeimage.jpg);
background-position: top center;
background-color: #000;
}
body {
width: 1054px;
height: 1054px;
background-color: #FFF;
}
However, since you seem to be table styling (urgh), it would probably be far more sensible to set the height of the table to 1054px and let the body adjust itself automatically to encompass the entire table. (Keep the html style proposed above, of course.)
但是，由于您似乎是表格样式（urgh），将表格的高度设置为 1054px 并让主体自动调整以包含整个表格可能会更明智。（当然，保持上面建议的 html 样式。）
回答by Paul D. Waite
Good question. I'm not sure, but have you tried using a single <div>(or <section>) inside <body>, and setting the width, heightand overflow: hiddenon that? Browsers might give special treatment to <html>and <body>.
好问题。我不确定，但你有没有试过在里面使用单个<div>（或<section>）<body>，并设置width，height然后overflow: hidden呢？浏览器可能会给予特殊处理<html>和<body>。
回答by btx
Did you try setting the CSS margin of body to 0? Otherwise there will be some amt (depending on browser) of margin that is included in your page height (and width) but isn't controlled by the height style;
您是否尝试将 body 的 CSS 边距设置为 0？否则，页面高度（和宽度）中会包含一些边距（取决于浏览器），但不受高度样式的控制；
In CSS:
在 CSS 中：
body: { margin: 0; }
IN jQuery:
在 jQuery 中：
$('body').css('margin', 0);
