问题是,我有一个内容div,它在容器高度上伸展它的容器(容器和内容div有自动高度).
我想要背景容器,它是内容div的兄弟div来拉伸以填充容器.后台容器包含div以将背景分成块.
背景和容器div的宽度为100%,内容容器没有.
HTML:
<div id="container">
<div id="content">
Some long content here ..
</div>
<div id="backgroundContainer">
<div id="someDivToShowABackground"/>
<div id="someDivToShowAnotherBackground"/>
</div>
</div>
CSS:
#container {
height:auto;
width:100%;
}
#content {
height: auto;
width:500px;
margin-left:auto;
margin-right:auto;
}
#backgroundContainer {
height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport.
}
and*_*ari 40
在2018年,许多浏览器都支持Flexbox和Grid,它们是非常强大的CSS显示模式,超出了传统方法,例如Faux Columns或Tabular Displays(在本答案的后面部分将对其进行处理).
为了使用Grid实现这一点,只需在容器上指定display:grid和grid-template-columns即可.该网格模板列取决于你,在这个例子中,我将使用3列的列数,因此酒店将看:网格模板列:汽车汽车汽车,这基本上意味着,每列将有自动宽度.
Grid的完整工作示例:
html, body {
padding: 0;
margin: 0;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
width: 100%;
}
.grid-item {
padding: 20px;
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}<!DOCTYPE html>
<html>
<head>
<title>Three Columns with Grid</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
</div>
<div class="grid-item b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
</div>
<div class="grid-item c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
</div>
</div>
</body>
</html>另一种方法是通过在列的容器上指定display:flex并为列提供相关宽度来使用Flexbox .在我将使用的示例中,有3列,你基本上需要在3中分割100%,所以它是33.3333%(足够接近,谁关心0.00003333 ......无论如何都不可见).
使用Flexbox的完整工作示例:
html, body {
padding: 0;
margin: 0;
}
.flex-container {
display: flex;
width: 100%;
}
.flex-column {
padding: 20px;
width: 33.3333%;
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}<!DOCTYPE html>
<html>
<head>
<title>Three Columns with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="flex-column a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta.</p>
</div>
<div class="flex-column b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis. Pellentesque accumsan nunc non arcu tincidunt auctor eget ut magna. In vel est egestas, ultricies dui a, gravida diam. Vivamus tempor facilisis lectus nec porta. Donec commodo elit mattis, bibendum turpis eu, malesuada nunc. Vestibulum sit amet dui tincidunt, mattis nisl et, tincidunt eros. Vivamus eu ultrices sapien. Integer leo arcu, lobortis sed tellus in, euismod ultricies massa. Mauris gravida quis ligula nec dignissim. Proin elementum mattis fringilla. Donec id malesuada orci, eu aliquam ipsum. Vestibulum fermentum elementum egestas. Quisque sit amet tempor mi.</p>
</div>
<div class="flex-column c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id sapien auctor, faucibus felis et, commodo magna. Sed eu molestie nibh, ac tincidunt turpis.</p>
</div>
</div>
</body>
</html>自2017/2018以来,所有主流浏览器都支持Flexbox和Grid,caniuse.com也证实了这一点:我可以使用网格,我可以使用flex.
还有许多经典解决方案,在Flexbox和Grid时代之前使用,如OneTrueLayout技术,Faux Columns技术,CSS表格显示技术以及分层技术.
我不建议使用这些方法,因为它们具有hackish性质,并且在我看来并不那么优雅,但是出于学术原因很了解它们.
对于同等高度列的解决方案是CSS表格显示技术,这意味着使用display:table功能.它适用于Firefox 2 +,Safari 3 +,Opera 9+和IE8.
CSS表格显示的代码:
#container {
display: table;
background-color: #CCC;
margin: 0 auto;
}
.row {
display: table-row;
}
.col {
display: table-cell;
}
#col1 {
background-color: #0CC;
width: 200px;
}
#col2 {
background-color: #9F9;
width: 300px;
}
#col3 {
background-color: #699;
width: 200px;
}<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>即使表格单元宽度的自动扩展存在问题,也可以通过插入具有表格单元格的另一个div并给予其固定宽度来轻松解决.无论如何,宽度的过度扩展发生在使用非常长的单词的情况下(我怀疑任何人都会使用a,比方说600px长的单词)或者某些div的宽度大于table-cell的宽度.
该仿柱技术是目前最流行的经典解决了这个问题,但它也有一些缺点,例如,你如果要调整列来调整背景平铺图像,它也不是一个完美的解决方案.
该OneTrueLayout技术包括创建一个极端的大高度的填充底部,并通过施加负削减它通过将真实的边界位置,以"正常逻辑位置" 下边距相同的巨大价值和隐藏所创造的程度带溢出的填充:隐藏应用于内容包装器.一个简化的例子是:
工作范例:
.wraper {
overflow: hidden; /* This is important */
}
.floatLeft {
float: left;
}
.block {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 30000px; /* This is important */
margin-bottom: -30000px; /* This is important */
width: 33.3333%;
box-sizing: border-box; /* This is so that the padding right and left does not affect the width */
}
.a {
background-color: DarkTurquoise;
}
.b {
background-color: LightSalmon;
}
.c {
background-color: LightSteelBlue;
}<html>
<head>
<title>OneTrueLayout</title>
</head>
<body>
<div class="wraper">
<div class="block floatLeft a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis.</p>
</div>
<div class="block floatLeft b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit. Praesent sed pellentesque lorem. Nam neque ante, egestas ut felis vel, faucibus tincidunt risus. Maecenas egestas diam massa, id rutrum metus lobortis non. Sed quis tellus sed nulla efficitur pharetra. Fusce semper sapien neque. Donec egestas dolor magna, ut efficitur purus porttitor at. Mauris cursus, leo ac porta consectetur, eros quam aliquet erat, condimentum luctus sapien tellus vel ante. Vivamus vestibulum id lacus vel tristique.</p>
</div>
<div class="block floatLeft c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada ipsum pretium tellus condimentum aliquam. Donec eget tempor mi, a consequat enim. Mauris a massa id nisl sagittis iaculis. Duis mattis diam vitae tellus ornare, nec vehicula elit luctus. In auctor urna ac ante bibendum, a gravida nunc hendrerit.</p>
</div>
</div>
</body>
</html>该分层技术必须是一个非常整洁的解决方案,涉及的div的withing主相对定位包装DIV绝对定位.它基本上由许多子div和主div组成.主要的div有必要的位置:相对于它的css属性集合.这个div的孩子们都是势在必行的位置:绝对的.孩子们必须将top和bottom设置为0,并将左右尺寸设置为彼此容纳列.例如,如果我们有两列,一个宽度为100px,另一个为200px,考虑到我们想要左侧的100px和右侧的200px,左列必须有{left:0; 右:200px}和右栏{左:100px; 右:0;}
在我看来,自动高度容器内未实现的100%高度是一个主要缺点,W3C应该考虑修改这个属性(自2018年以来可以用Flexbox和Grid解决).
其他资源:link1,link2,link3,link4,link5(重要)
小智 9
请#container给display:inline-block
#container {
height: auto;
width: 100%;
display: inline-block;
}
#content {
height: auto;
width: 500px;
margin-left: auto;
margin-right: auto;
}
#backgroundContainer {
height: 200px; /*200px is example, change to what you want*/
width: 100%;
}
另见:W3Schools
好的,所以有人可能会打我这个答案,但是我使用jQuery来解决所有烦人的问题,事实证明我今天只是使用了一些东西来修复类似的问题.假设你使用jquery:
$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
这是未经测试的,但我认为你可以在这里看到这个概念.基本上在加载之后,你可以获得高度(outerHeight包括padding + borders,innerHeight仅用于内容).希望有所帮助.
以下是将其绑定到window resize事件的方法:
$(window).resize(function() {
$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
});
在某些地方您需要设置固定高度，而不是在任何地方都使用 auto 。您会发现，如果您在内容和/或容器上设置固定高度，那么对其中的内容使用 auto 就可以了。
此外，即使您已经为其设置了高度，您的盒子仍然会随着更多内容而在高度上扩展 - 所以不用担心:)
#container {
height:500px;
min-height:500px;
}