HTML 中的容器大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11042731/
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
Container size in HTML?
提问by Lee
Edit: I resolved this by changing the position of .firstlayer to absolute. This makes the setting left/right margins to auto not work to center the container, so I set left:0; and right:0; which, when I define a width and mark it as important, centered the container. Thank you all for your help!
编辑：我通过将 .firstlayer 的位置更改为绝对来解决这个问题。这使得自动设置左/右边距无法使容器居中，所以我设置了 left:0; 和右：0; 当我定义宽度并将其标记为重要时，将容器居中。谢谢大家的帮助！
To clarify, I'm trying to get the to extend to the bottom of the page. All my attempts so far have been unsuccessful. Also, all of the height attributes are in .firstlayer for browser compatibility.
澄清一下，我试图将 扩展到页面底部。到目前为止，我所有的尝试都没有成功。此外，为了浏览器兼容性，所有高度属性都在 .firstlayer 中。
Annotated screenshots can be found here: (I'm just doing layout now, so it looks silly).
带注释的屏幕截图可以在这里找到：（我现在只是在做布局，所以看起来很傻）。
I have a pretty silly question. I'm working on a webpage, and I'm trying to get a <span>area to extend all the way to the bottom of the page. I've searched online for answers, and I've made sure Iset the body and html height to 100% and the container height to auto/min-height to 100%, but it's still only reaching to the page break.
我有一个很愚蠢的问题。我正在处理一个网页，我试图让一个<span>区域一直延伸到页面底部。我在网上搜索了答案，我已经确保将 body 和 html 高度设置为 100%，将容器高度设置为 auto/min-height 为 100%，但它仍然只到达分页符。
Does anyone have any suggestions on how to fix this?
有没有人对如何解决这个问题有任何建议？
My CSS is here:
我的 CSS 在这里：
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
border:0 none;
font:inherit;
margin:0;
padding:0;
}
html, body { width:100%; height:100%; }
body { background: #ff8 url("blue.jpg") repeat fixed; font-family: Helvetica, San-Serif; }
/*----- GRID -----*/
.container {
background: none;
overflow: none;
display: block;
z-index: 1;
}
.firstlayer {
background-color: #fff !important;
height: auto !important;
min-height: 100%;
height: 100%;
width: 960px;
margin:0 auto;
border-left: solid 1px #000; border-right: solid 1px #000;
}
.padded {margin-left:20px; margin-right:20px;}
span { height:auto; }
.onecol { width:8.33%; float:left; }
.twocols { width:16.66%; float:left; }
.threecols { width:25%; float:left; }
.fourcols { width:33.33%; float:left; }
.fivecols { width:41.66%; float:left; }
.sixcols { width:50%; float:left; }
.sevencols { width:58.33%; float:left; }
.eightcols { width:66.66%; float:left; }
.ninecols { width:75%; float:left; }
.tencols { width:83.33%; float:left; }
.elevencols { width:91.66%; float:left; }
.allcols { width:100%; float:left; }
footer {
font-size: 0.75em;
color: #fff;
background: 100px #000;
padding:10px 20px 10px 20px;
bottom: 0px;
height:7em;
}
And my HTML code is here:
我的 HTML 代码在这里：
<!--Begin the content area-->
<span class="container firstlayer">
<span class="container padded">
<!--TITLE AND SUBTITLE-->
<span class="container allcols">
<h1>Stand-in Title</h1>
<h1 class="subtitle">Stand-in Subtitle</h1>
</span>
<!--MEDIA PLACEHOLDER-->
<span style="height:400px; background-color:#000;" class="container allcols">
</span>
<!--ROW ZERO: 2 COLS-->
<span class="allcols" style="padding-top:1em;">
<span class="container sixcols">
<h2>Subtitle</h2>
<p> Lorem ipsum </p>
</span>
<span class="container sixcols">
<h2>Subtitle</h2>
<p> Lorem ipsum </p>
</span>
</span>
</span>
</span>
回答by Epik
Here ya go. Try not to use <span>tag but change it to a <div>tag. They are more robust and for no reason they do not work sometimes... Also you had too many height variables set as well. Basically when you had:
height: auto !important;
min-height: 100%;
height: 100%;
They were all contradicting each other. Simpler is normally better you were overthinking it a bit :)
给你。尽量不要使用<span>标签，而是将其更改为<div>标签。它们更健壮，有时无缘无故它们不起作用......你也设置了太多的高度变量。基本上当你有： height: auto !important; 最小高度：100%；高度：100%；他们都互相矛盾。更简单通常更好，你有点想多了:)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body, div, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
border:0 none;
font:inherit;
margin:0;
padding:0;
}
html, body { width:100%; height:100%; }
body { background: #ff8 url("blue.jpg") repeat fixed; font-family: Helvetica, San-Serif; }
...
/*----- GRID -----*/
.container {
background: none;
overflow: none;
display: block;
z-index: 1;
}
.firstlayer {
background-color: #fff !important;
min-height: 100%;
max-height:100%;
width: 960px;
margin:0 auto;
border-left: solid 1px #000; border-right: solid 1px #000;
}
.padded {margin-left:20px; margin-right:20px;}
div { height:auto; }
.onecol { width:8.33%; float:left; }
.twocols { width:16.66%; float:left; }
.threecols { width:25%; float:left; }
.fourcols { width:33.33%; float:left; }
.fivecols { width:41.66%; float:left; }
.sixcols { width:50%; float:left; }
.sevencols { width:58.33%; float:left; }
.eightcols { width:66.66%; float:left; }
.ninecols { width:75%; float:left; }
.tencols { width:83.33%; float:left; }
.elevencols { width:91.66%; float:left; }
.allcols { width:100%; float:left; }
footer {
font-size: 0.75em;
color: #fff;
background: 100px #000;
padding:10px 20px 10px 20px;
bottom: 0px;
height:7em;
}
</style>
</head>
<body>
<div class="container firstlayer">
<div class="container padded">
<!--TITLE AND SUBTITLE-->
<div class="container allcols">
<h1>Stand-in Title</h1>
<h1 class="subtitle">Stand-in Subtitle</h1>
</div>
<!--MEDIA PLACEHOLDER-->
<div style="height:400px; background-color:#000;" class="container allcols">
</div>
<!--ROW ZERO: 2 COLS-->
<div class="allcols" style="padding-top:1em;">
<div class="container sixcols">
<h2>Subtitle</h2>
<p> Lorem ipsum </p>
</div>
<div class="container sixcols">
<h2>Subtitle</h2>
<p> Lorem ipsum </p>
</div>
</div>
...
</div>
</div>
</body>
</html>
Hope this helps!!
希望这可以帮助！！
回答by vynx
I noticed that you have a couple of span classes set to float:left. I'm assuming that you have taken Epik's advice to change those to divs instead.
我注意到你有几个 span 类设置为float:left. 我假设您已经采纳了 Epik 的建议，将它们改为 div。
Not entirely sure if you have included any clearfixes to your HTML as the code sample you provided is partial and considering that your screenshots are indicating that the main container or wrapper isn't even regarding the existence of the floated child elements to contain them, it might likely be that there aren't any clearfixes. You might want resolve that issue first by adding a clearfix after the floated elements before you go on to try and get the div in question to fill the screen. Something like this:
不完全确定您是否在 HTML 中包含了任何清除修复，因为您提供的代码示例是部分的，并且考虑到您的屏幕截图表明主容器或包装器甚至不涉及包含它们的浮动子元素的存在，它可能是没有任何clearfixes。在继续尝试获取有问题的 div 以填充屏幕之前，您可能希望首先通过在浮动元素之后添加 clearfix 来解决该问题。像这样的东西：
HTML
HTML
<div id="container">
<div id="col1" class="col">1</div>
<div id="col2" class="col">2</div>
<div id="col3" class="col">3</div>
<div class="clearfix"></div>
</div>
CSS
CSS
body{
background:#333333;
}
#container{
width:100%;
height:100%;
position:absolute;
background:#ffffff;
top:0;
left:0;
}
.col{
float:left;
width:30%;
margin-right:30px;
background:#cccccc;
color:#333333;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
You will notice in the above that I added position:absoluteto #container. This is because if you do not do so, the height:100%definition will not work. The clearfix in this case may not seem like it is necessary since the container will always fill the entire height of the window. However, if your content is dynamic in the sense that you will keep adding more columns to the container, the container will likely fail to register the new floated columns and you'd be ending up in square one again.
您会在上面注意到我添加position:absolute到#container. 这是因为如果不这样做，height:100%定义将不起作用。在这种情况下，clearfix 似乎没有必要，因为容器将始终填满窗口的整个高度。但是，如果您的内容是动态的，因为您将继续向容器添加更多列，则容器可能无法注册新的浮动列，您将再次以第一个方格结束。
So basically, what's being done here is that you first need to add a clearfix to make the container recognize the presence of floated child elements and then position the container as absolute first before using height:100%or something lesser like height:90%to free up essential space for your black footer.
所以基本上，这里所做的是首先需要添加一个 clearfix 以使容器识别浮动子元素的存在，然后在使用之前首先将容器定位为绝对的，height:100%或者不太像height:90%为黑色页脚释放必要空间的东西.
I've put the sample codes in jsFiddle for your reference - http://jsfiddle.net/qmHzC/
我已将示例代码放在 jsFiddle 中供您参考 - http://jsfiddle.net/qmHzC/
You'd notice that I've set the bodyto background:#333333. This is to act as a control for you to test the code. Remove position:absolutefrom #containerand you'd see that the container no longer takes up the entire window and will reveal the body's darker background. On top of removing the absolute positioning, you can also try removing the <div class="clearfix"></div>after the floated child elements and you'd see that the white container no longer recognizes the floated child elements and immediately disappears like as if it is holding nothing.
您会注意到我已将 设置body为background:#333333。这是作为您测试代码的控件。position:absolute从中删除#container，您会看到容器不再占据整个窗口，并且会显示主体的较暗背景。除了删除绝对定位之外，您还可以尝试删除<div class="clearfix"></div>浮动子元素之后的之后，您会看到白色容器不再识别浮动子元素并立即消失，就像它什么都没有一样。
Hope this helps!
希望这可以帮助！
EDIT:After some thought, I strongly feel that the issue is more because of the lack of a clearfix. Positioning the container as absolute will prevent you from using margin:0 autoto centralise the container in the center of the viewport. Moreover, the container is only supposed to flow right down to the top of the black footer rather than the bottom of the window. As such, the true height of the white container should only go as much as it's content's worth plus any top or bottom paddings. To achieve that, the clearfix solution should work on it's own. I'm not gonna edit off the position:absoluteportion as it might be helpful for those who are thinking of making a div inherit the window's height and width without the use of jQuery.
编辑：经过深思熟虑，我强烈认为问题更多是因为缺少 clearfix。将容器定位为绝对将阻止您使用margin:0 auto将容器集中在视口的中心。此外，容器只应该流到黑色页脚的顶部而不是窗口的底部。因此，白色容器的真实高度应仅与其内容物的价值加上任何顶部或底部填充物一样多。为了实现这一点，clearfix 解决方案应该自己工作。我不会编辑掉该position:absolute部分，因为它可能对那些想要在不使用 jQuery 的情况下让 div 继承窗口的高度和宽度的人有所帮助。
回答by Epik
I really wouldn't worry too much about IE6 as most people/companies these days are moving away from supporting this. The company i work for have already because it is just too old (pre Windows XP, 2001).
我真的不会太担心 IE6，因为现在大多数人/公司都不再支持它了。我工作的公司已经成立了，因为它太老了（Windows XP 之前，2001）。
Instead of using span tags use div tags because if u would like to add in HTML5 later it is alot more diverse then a span tag.
使用 div 标签而不是使用 span 标签，因为如果您想稍后添加 HTML5，它会比 span 标签更加多样化。
Basically it works for me setting max and min height with removing height:auto and height:100%.
基本上它适用于我通过删除 height:auto 和 height:100% 设置最大和最小高度。
Let me know how you go and if it keeps up please post a screenshot of what you are getting so i can compare and test.
让我知道你的进展情况，如果它跟上，请张贴你得到的截图，以便我可以比较和测试。
