全高显示：无需使父对象为100％的表格单元格内容

Question

我正在尝试在table-cell div内获取内容，以达到父div的100％。但是，我只能通过将height:100%;添加到display:table父div来实现。

通常可以，但是因为我需要html，body { height：100％;}用于网站上其他位置的全高内容，这会使表格成为浏览器的全高，这是我所不希望的。

是否有一种方法可以使内容table-cell达到最高高度而不必将height:100;放在display:table; div上？

Here is a jsFiddle

html,
body {
  height:100%;
  margin:0;
  padding:0;
}

#banner {
  width:100%;
  height:100%;
  background:blue;
  color:#ffffff;
}

.o-ds-table {
	position:relative;
	display:table;  
	width:100%;
  /* height:100%; this fixed the red content being full height but makes the table full height of content*/
	margin:0 auto;
}

.o-ds-table-cell {
	display:table-cell;
	padding:0 10px;
	position:relative;
  border:2px solid blue;
  background:yellow;
}

.cell-item-width-4 {
  width:25%;
}

.panel-item {
	background:red;
	height:100%;
	display:block;

}

p {
  margin:0;
  padding:0;
}

<section id="banner">
 SCROLL DOWN!
</section>

<div class="o-ds-table">
                        
  <div class="o-ds-table-cell cell-item-width-4 panel-wrap">
    <div class="panel-item">

     <p>
     Lorem ipsum dolor sit amet consectetur adipiscing elit. Mauris nec massa tortor. Lorem ipsum dolor sit amet consectetur adipiscing elit. Mauris nec massa tortor. Lorem ipsum dolor sit amet consectetur adipiscing elit. Mauris nec massa tortor.
     </p>

    </div>
  </div>
 <div class="o-ds-table-cell cell-item-width-4> panel-wrap">
    <div class="panel-item">

     <p>
     Lorem ipsum dolor sit amet consectetur adipiscing elit.
     </p>

    </div>
  </div>
 <div class="o-ds-table-cell cell-item-width-4 panel-wrap">
    <div class="panel-item">

     <p>
     Lorem ipsum dolor sit amet consectetur adipiscing elit. 
     </p>

    </div>
  </div>
 <div class="o-ds-table-cell cell-item-width-4 panel-wrap">
    <div class="panel-item">

     <p>
     Lorem ipsum dolor sit amet consectetur adipiscing elit. 
     </p>

    </div>
  </div>

</div>

<section>
  stuff sits below 
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis ultrices placerat. Duis at bibendum urna. Vestibulum augue ex, lacinia vitae orci consectetur, elementum congue neque. Proin sed rhoncus felis. Donec justo arcu, iaculis eget sollicitudin sed, posuere nec mi. Cras sed ligula vel eros tincidunt interdum ac sit amet sapien. Curabitur rutrum felis id neque convallis iaculis. Sed viverra in magna sed mollis. Sed ac iaculis metus, vel pretium purus. Maecenas accumsan in ligula a vehicula. In sit amet tortor mi.

Cras pellentesque tempor ex id gravida. Pellentesque gravida ipsum eget dignissim ullamcorper. Nulla sagittis nibh et tortor tempor, quis pellentesque ligula tincidunt. Vivamus feugiat risus erat, ut efficitur nisi malesuada commodo. Suspendisse feugiat consequat massa at luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent ut purus et neque interdum mollis. Nulla interdum finibus lorem vitae laoreet. Duis accumsan dictum placerat. Cras et laoreet justo. Donec aliquet mattis eros ut placerat. Sed quis viverra diam.
  
</section>

Answer 1

我建议您查找flexbox css，这是制作2D布局的好方法。

因为您使用的是div而不是真实的<table></table>，所以我假设（如果我错了，请纠正我）您使用这种方式从表css属性的属性形成布局。

html,
body {
  height:100%;
  margin:0;
  padding:0;
}

#banner {
  width:100%;
  height:100%;
  background:blue;
  color:#ffffff;
}

.o-ds-table {

    position:relative;
    display:flex; /* I changed this */ 
    width:100%;
    margin:0 auto;
}

.o-ds-table-cell {
    /* display:table-cell; not needed with flex */
    padding:0 10px;
    flex: 1; /* I changed this */
    /* position:relative;  not needed with flex */
  border:2px solid blue;
  background:yellow;
}

.cell-item-width-4 {
  /* width:25%;  not needed with flex */
}

.panel-item {
    background:red;
    height:100%;
    /* display:block;  not needed with flex */

}

p {
  margin:0;
  padding:0;
}

<section id="banner">
 SCROLL DOWN!
</section>

<div class="o-ds-table">

  <div class="o-ds-table-cell cell-item-width-4 panel-wrap">
    <div class="panel-item">

     <p>
     Lorem ipsum dolor sit amet consectetur adipiscing elit. Mauris nec massa tortor. Lorem ipsum dolor sit amet consectetur adipiscing elit. Mauris nec massa tortor. Lorem ipsum dolor sit amet consectetur adipiscing elit. Mauris nec massa tortor.
     </p>

    </div>
  </div>
 <div class="o-ds-table-cell cell-item-width-4> panel-wrap">
    <div class="panel-item">

     <p>
     Lorem ipsum dolor sit amet consectetur adipiscing elit.
     </p>

    </div>
  </div>
 <div class="o-ds-table-cell cell-item-width-4 panel-wrap">
    <div class="panel-item">

     <p>
     Lorem ipsum dolor sit amet consectetur adipiscing elit. 
     </p>

    </div>
  </div>
 <div class="o-ds-table-cell cell-item-width-4 panel-wrap">
    <div class="panel-item">

     <p>
     Lorem ipsum dolor sit amet consectetur adipiscing elit. 
     </p>

    </div>
  </div>

</div>

<section>
  stuff sits below 

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis ultrices placerat. Duis at bibendum urna. Vestibulum augue ex, lacinia vitae orci consectetur, elementum congue neque. Proin sed rhoncus felis. Donec justo arcu, iaculis eget sollicitudin sed, posuere nec mi. Cras sed ligula vel eros tincidunt interdum ac sit amet sapien. Curabitur rutrum felis id neque convallis iaculis. Sed viverra in magna sed mollis. Sed ac iaculis metus, vel pretium purus. Maecenas accumsan in ligula a vehicula. In sit amet tortor mi.

Cras pellentesque tempor ex id gravida. Pellentesque gravida ipsum eget dignissim ullamcorper. Nulla sagittis nibh et tortor tempor, quis pellentesque ligula tincidunt. Vivamus feugiat risus erat, ut efficitur nisi malesuada commodo. Suspendisse feugiat consequat massa at luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent ut purus et neque interdum mollis. Nulla interdum finibus lorem vitae laoreet. Duis accumsan dictum placerat. Cras et laoreet justo. Donec aliquet mattis eros ut placerat. Sed quis viverra diam.

</section>

一些其他信息：https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Answer 2

如果只需要拉伸背景，则可以简单地考虑table-cell中的多个背景：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#banner {
  width: 100%;
  height: 100%;
  background: blue;
  color: #ffffff;
}

.o-ds-table {
  position: relative;
  display: table;
  width: 100%;
  /* height:100%; this fixed the red content being full height but makes the table full height of content*/
  margin: 0 auto;
}

.o-ds-table-cell {
  display: table-cell;
  padding: 0 10px;
  position: relative;
  border: 2px solid blue;
  background: 
    linear-gradient(red, red) center/calc(100% - 20px) 100% no-repeat, 
    yellow;
}

.cell-item-width-4 {
  width: 25%;
}

.panel-item {
  background: red;
  height: 100%;
  display: block;
}

p {
  margin: 0;
  padding: 0;
}

<section id="banner">
  SCROLL DOWN!
</section>

<div class="o-ds-table">

  <div class="o-ds-table-cell cell-item-width-4 panel-wrap">
    <div class="panel-item">

      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Mauris nec massa tortor. Lorem ipsum dolor sit amet consectetur adipiscing elit. Mauris nec massa tortor. Lorem ipsum dolor sit amet consectetur adipiscing elit. Mauris nec massa tortor.
      </p>

    </div>
  </div>
  <div class="o-ds-table-cell cell-item-width-4> panel-wrap">
    <div class="panel-item">

      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit.
      </p>

    </div>
  </div>
  <div class="o-ds-table-cell cell-item-width-4 panel-wrap">
    <div class="panel-item">

      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit.
      </p>

    </div>
  </div>
  <div class="o-ds-table-cell cell-item-width-4 panel-wrap">
    <div class="panel-item">

      <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit.
      </p>

    </div>
  </div>

</div>

<section>
  stuff sits below Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis ultrices placerat. Duis at bibendum urna. Vestibulum augue ex, lacinia vitae orci consectetur, elementum congue neque. Proin sed rhoncus felis. Donec justo arcu, iaculis
  eget sollicitudin sed, posuere nec mi. Cras sed ligula vel eros tincidunt interdum ac sit amet sapien. Curabitur rutrum felis id neque convallis iaculis. Sed viverra in magna sed mollis. Sed ac iaculis metus, vel pretium purus. Maecenas accumsan in
  ligula a vehicula. In sit amet tortor mi. Cras pellentesque tempor ex id gravida. Pellentesque gravida ipsum eget dignissim ullamcorper. Nulla sagittis nibh et tortor tempor, quis pellentesque ligula tincidunt. Vivamus feugiat risus erat, ut efficitur
  nisi malesuada commodo. Suspendisse feugiat consequat massa at luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent ut purus et neque interdum mollis. Nulla interdum finibus lorem vitae laoreet.
  Duis accumsan dictum placerat. Cras et laoreet justo. Donec aliquet mattis eros ut placerat. Sed quis viverra diam.

</section>

Answer 3

您的class="o-ds-table-cell"部门已达到父部门的100％。

请注意，在您提供的HTML代码段中，该父分区（class="o-ds-table"）除了自己的子级外，没有其他内容来确定其高度-因此，它成为具有最大子级的子级的高度高度。

如果您提供确定“ o-ds-table”分区高度的其他信息，则表格单元分区将根据您的需要进行拉伸以匹配它。我无法告诉您如何更改该高度，因此它不能仅由当前的子元素控制。这取决于该划分的目的以及您打算如何将其与其他内容相关联。在大多数情况下，您可能希望将其放置在一个容器中，该容器可以容纳容器及其附近的内容，并按布局要求按比例设置宽度和高度，或使用固定大小来设置宽度和高度。

如果没有其他方法可以防止高度过小，最好也添加“最小高度”。