css - CSS:包含div时自动设置高度，包含div的背景div上设置高度为100％

标签 css height

问题是我有一个content div，它沿容器的高度方向拉伸(stretch)(容器和content div具有自动高度)。

我想要背景容器，它是内容div的同级div进行拉伸(stretch)以填充容器。背景容器包含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.
}

最佳答案

在2018年，许多浏览器都支持Flexbox和Grid，它们是功能非常强大的CSS显示模式，使经典方法(如Faux Columns或Tabular Displays)(这些在本答案的稍后部分中介绍)显得不那么重要。

为了使用Grid来实现这一点，只需在容器上指定显示即可:grid 和 grid-template-columns 。 grid-template-columns 取决于您拥有的列数，在此示例中，我将使用3列，因此该属性将如下所示: grid-template-columns:auto auto auto ，这基本上意味着每个列将具有自动宽度。

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>


另一种方法是使用Flexbox，方法是指定显示:在列的容器上弯曲，并为列指定适当的宽度。在我将使用的3列示例中，您基本上需要将100％拆分为3，所以它是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的证实:Can I use grid，Can I use flex。

在Flexbox和Grid时代之前，还有许多经典的解决方案，例如 OneTrueLayout技术，仿列技术， CSS表格显示技术，还有分层技术。

我不建议使用这些方法，因为它们具有hackus的性质并且在我看来并不那么优雅，但是出于学术原因很高兴知道它们。

对于等高栏的解决方案是CSS Tabular Display Technique，这意味着可以使用 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并为其设置固定宽度来轻松解决。无论如何，在使用极长的单词(我怀疑有人会使用 600px 长单词)或某些div的宽度大于表格单元格宽度的情况下，会发生宽度的过度扩展。

Faux Column Technique是解决此问题的最流行的经典解决方案，但是它有一些缺点，例如，如果要调整列的大小，则必须调整背景平铺图像的大小，这也不是一种优雅的解决方案。

OneTrueLayout Technique包括创建一个非常大的高度的填充底部，并通过应用相同的巨大值的负边缘底部并隐藏创建的范围，通过将实际边界位置移到“正常逻辑位置”来将其剪切掉通过填充溢出:将隐藏应用于内容包装器。一个简化的示例是:

工作示例:

.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>



Layering Technique 必须是一个非常整洁的解决方案，它涉及到div的绝对定位以及一个主要相对定位的包装div。它基本上由多个子div和主div组成。主div的命令位置必须是:相对于其CSS属性集合的。该div的子代必须是位置:absolute 。子级必须将顶部和底部设置为 0 和左右尺寸设置为彼此容纳列。例如，如果我们有两列，其中一列的宽度为 100px ，另一列的 200px ，考虑到我们希望左侧为100px，右侧为 200px ，则左列必须为 {左:0；右:200px} ，右列 {左:100px;右:0;}

在我看来，自动高度容器中未实现的100％高度是一个主要缺点，W3C应该考虑修改此属性(自2018年以来，Flexbox和Grid可以解决此属性)。

其他资源: link1，link2，link3，link4，link5 (important)

关于css - CSS:包含div时自动设置高度，包含div的背景div上设置高度为100％，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2779554/

上一篇：css - Bootstrap 3 : Using img-circle, 如何从非方形图像中获取圆圈？

下一篇：css - 为什么TR不采取风格？

相关文章：

javascript - 自动 img 高度的插件有一个例子

javascript - 设置 img src 属性时宽度和高度不变

iOS - WebView 和字符串

python - PyQtGraph : how to change size (height and width) of graph in a ScrollArea

css - 将带有背景图像的 div 设置为 100% 高度

css - 如何使 css 适合我的内容而没有空格

html - 如何修复<div>元素，使其仅在调整浏览器窗口大小时缩放？

c - 从 jpeg 图像文件获取宽度和高度

html - 什么 CSS 属性将下拉菜单保留在其父 li 之下？

PHP - 帮助编码 echo 语句以创建不同背景颜色的每隔一行

©2024 IT工具网  联系我们