Html CSS中具有100%高度的空div_Html_Css

Html CSS中具有100%高度的空div

html css

Html CSS中具有100%高度的空div,html,css,Html,Css,我已经玩了将近半天的代码，最后我决定把它传给你。我想把三个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="h

我已经玩了将近半天的代码，最后我决定把它传给你。我想把三个

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>

提前感谢您的帮助。

您需要将

身高：100%

添加到

身体

和

html

标记以及div类中：

html{
高度：100%；/*我知道这并不能真正回答您的问题，但我倾向于在父元素上使用position:relative
，在capping元素上使用position:absolute
。这保证了动态变化的框不会偏离您的布局。我还喜欢使用：before:after属性（IE 8+）因为语义原因，但您可以使用子元素代替。效果也一样好。我还加入了框大小调整（FF需要-moz语法），因此边框看起来不会很模糊（在生产环境中可能不需要，因为您将使用背景）
现在，代码
CSS
HTML

Lorem ipsum dolor



演示

媒体查询可用于实现%提供的大部分内容，而无需任何痛苦。它不是那么平滑，但用于介绍横幅时，它是完全可以接受的
首先使用移动声明，您将使用类似的内容
.banner { height: 200px; }

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

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

编辑：我使用了最小宽度，但也可以使用最小高度。为了让所有类型的设备看起来都很好，需要混合使用最小宽度和最小高度。
好的，外部div现在更长了。但是当我放置更长的内容时（即需要滚动）在中间的div中，所有的div看起来都与屏幕大小有关，而不是与内容有关。是否有任何可能的解决方法？请尝试min height:100%
，而不是height:100%
（或者将overflow-y:scroll
添加到div\chs内容中）
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;
}

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

.banner { height: 200px; }

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

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