CSS中高度为100％的空div

Question

CSS中高度为100％的空div

18

我已经花了将近半天的时间来研究这段代码，最终决定转交给你。我想把三个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：

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;
}

提前感谢您的帮助。

- MarcinAu

3个回答

4

我知道这并不完全回答了你的问题，但我更倾向于使用父元素上的position:relative和覆盖元素上的position:absolute方法。这可以确保动态变化的框不会破坏你的布局。我也喜欢使用:before :after属性（IE 8+），因为它具有语义原因，但你也可以使用子元素。同样有效。我还添加了box-sizing（FF需要-moz语法），以便边框看起来不那么丑陋。（在生产环境中可能不是必需的，因为你将使用背景代替）。

现在，代码！

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

<div id="container">
    <div id="content">
        <p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
    </div>
</div>

演示

http://jsfiddle.net/f7yL6/
http://jsfiddle.net/f7yL6/show

（本文为IT技术相关内容，请勿删除HTML标签）

- Joseph Marikle

0

媒体查询可以实现大部分 % 提供的功能，而不需要任何痛苦。虽然不够流畅，但在用于介绍横幅时完全可以接受。

首先使用移动声明，您可以使用类似以下内容的东西。

.banner { height: 200px; }

@media all and (min-width: 500px) {
  .banner { height: 400px; }
}

@media all and (min-width: 1000px) {
  .banner { height: 500px; }
}

编辑：我使用了min-width，但也可以使用min-height。为了在各种设备上真正实现良好的外观，需要同时使用min-width和min-height。

- Bernard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin Boucher · Accepted Answer

您需要将height: 100%添加到您的body和html标签，以及您的

类：

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%; /* <------------ */
}