Html CSS 中高度为 100% 的空 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13614761/
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
Empty div with 100% height in CSS
提问by MartinUKPL
I've been playing with this code for almost half of the day and I finally decided to pass it on to you. I would like to place three divelements next to each other with the left and right ones surrounding the main one. I would like both of the outer divs to contain only a background image and hence take on the same height as the middle div. I've been playing with solutions from other posts like this, but all of my tries were unsuccessful.
我已经玩了将近半天的代码，我终于决定把它传给你。我想将三个div元素并排放置，左右元素围绕主要元素。我希望两个外部 div 都只包含一个背景图像，因此与中间的高度相同div。我一直在尝试其他类似帖子的解决方案，但我所有的尝试都没有成功。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="content">
<p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
</div>
<div id="right"></div>
</div>
</body>
CSS:
CSS：
body {
text-align: center;
}
div#container {
width: 954px;
margin: 0px auto;
height: 100%;
border: 1px solid lime;
overflow: hidden;
position: relative;
}
div#left {
margin: 0px auto;
width: 5px;
border: 1px solid red;
float: left;
display: block;
}
div#right {
margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
}
div#content {
width: 920px;
margin: 0px auto;
text-align: left;
background: #ffffff;
padding: 0px 10px;
float: left;
}
p {
font: normal 16px/18px 'Trebuchet MS', Helvetica, sans-serif;
margin: 20px 0px;
}
Thanks in advance for your help.
在此先感谢您的帮助。
回答by Kevin Boucher
You'll need to add height: 100%to your bodyand htmltags, as well as your div classes:
您需要添加height: 100%到您的body和html标签，以及您的 div 类：
html {
height: 100%; /* <------------ */
}
body {
text-align: center;
height: 100%; /* <------------ */
}
div#container {
width: 954px;
margin: 0px auto;
height: 100%;
border: 1px solid lime;
overflow: hidden;
position: relative;
}
div#left {
margin: 0px auto;
width: 5px;
border: 1px solid red;
float: left;
display: block;
height: 100%; /* <------------ */
}
div#right {
margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
height: 100%; /* <------------ */
}
div#content {
width: 920px;
margin: 0px auto;
text-align: left;
background: #ffffff;
padding: 0px 10px;
float: left;
height: 100%; /* <------------ */
}
回答by Joseph Marikle
I know this doesn't really answer your question, but I tend to prefer a method that uses position:relativeon the parent and position:absoluteon the capping elements. This guarantees that a dynamically changing box will not throw off your layout. I also like to use the :before :after attributes (IE 8+) because of semantic reasons, but you can use child elements instead. Works just as fine. I also threw in box-sizing (FF needs -moz syntax) so the borders don't look fugly. (probably not necessary in a production setting as your would be using a background instead).
我知道这并不能真正回答您的问题，但我倾向于更喜欢position:relative在父position:absolute元素和上限元素上使用的方法。这保证了动态变化的框不会抛弃您的布局。由于语义原因，我也喜欢使用 :before :after 属性（IE 8+），但您可以使用子元素代替。工作得一样好。我还加入了 box-sizing（FF 需要 -moz 语法），所以边框看起来不那么难看。（在生产环境中可能不需要，因为您将使用背景代替）。
And now, the code!
现在，代码！
CSS
CSS
div#container:before {
content:"";
width: 5px;
border: 1px solid red;
display: block;
position:absolute;
height:100%;
left:0px;
top:0px;
box-sizing:border-box; /* careful... FF needs -moz if you need that compatibility */
}
div#container:after {
content:"";
width: 5px;
border: 1px solid blue;
display: block;
position:absolute;
height:100%;
right:0px;
top:0px;
box-sizing:border-box;
}
HTML
HTML
<div id="container">
<div id="content">
<p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
</div>
</div>
DEMO
演示
回答by Bernard
Media queries can be used to achieve most of what % offers without any of the pain. It's not as smooth but when used for intro banners it is perfectly acceptable.
媒体查询可用于实现 % 提供的大部分内容，而不会带来任何痛苦。它不是那么流畅，但当用于介绍横幅时，它是完全可以接受的。
Using mobile declarations first you would use something like this.
首先使用移动声明，你会使用这样的东西。
.banner { height: 200px; }
@media all and (min-width: 500px) {
.banner { height: 400px; }
}
@media all and (min-width: 1000px) {
.banner { height: 500px; }
}
Edit: I used min-width but min-height can also be used. To really get things to look good on all sort of devices, a mix of min-width and min-height would need to be used.
编辑：我使用了 min-width 但也可以使用 min-height。为了让所有类型的设备都看起来不错，需要混合使用 min-width 和 min-height。
