html - 全高显示：表格单元格内容不使父级 100%

Question

我试图让table-celldiv 中的内容达到父 div 的 100%。但是我只能通过添加 height:100%;到display:table父 div 来实现这一点。

这通常没问题，但是因为我需要 html,body { height:100%;} 用于网站其他地方的全高内容，这使得表格的浏览器全高，这是我不想要的。

有没有一种方法可以在我的table-cell全高度内制作内容而不必放在height:100;div 上display:table;？

这是一个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>

标签： htmlcss

Answer 1

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

因为您 using div's 而不是真实的<table></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