Question

我几乎有一半时间都在使用这段代码，最后我决定将它传递给你。我想将三个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：

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

提前感谢您的帮助。

Answer 1

您需要在height: 100%和body代码以及div类中添加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%; /* <------------ */
}

Answer 2

我知道这并没有真正回答你的问题，但我倾向于选择在父级使用position:relative而在封顶元素使用position:absolute的方法。这可以保证动态更改的框不会丢失您的布局。我也喜欢使用：before：after属性（IE 8+），因为语义原因，但你可以使用子元素代替。工作得很好。我还投入了大小调整（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

Answer 3

媒体查询可以用来实现％提供的大部分内容而不会有任何痛苦。它不是那么流畅，但是当用于介绍横幅时，它是完全可以接受的。

首先使用移动声明，你会使用类似的东西。

.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。为了让所有类型的设备看起来都很好看，需要使用最小宽度和最小高度的混合。

在CSS中使用100％高度的空div

3 个答案:

CSS

HTML

样本