Question

我无法找到一种方法来让一个表有4行具有完全相同的高度（不使用表标记）。此表格包含在div显示{。}}。

我创建了这个jsbin：https://jsbin.com/jejupogodi/edit?html,output

我希望粉红色部分占据所有可用高度，并且其中的每一行应该具有25％的高度（无论内容长度是多少）。

Answer 1

我整理了你的代码。我使用vh（垂直高度）而不是百分比。您可以运行代码段，但这里是fiddle

    .container {
      display: table;
      width: 100%;
      height: 100vh;
      background: lightgreen;
    }
    .focus {
      height: 500px;
    }
    .sliderContainer {
      display: table-cell;
      width: 40%;
      height: 100%;
      vertical-align: top;
      background-color: white;
    }
    .slider {
      margin: 0px;
      padding: 0px;
      list-style-type: none;
      display: table;
      height: 100%;
      width: 100%;
    }
    .slider li {
      display: table-row;
      cursor: pointer;
      height: 25vh;
      background-color: pink;
      overflow: hidden;
    }
    li .sliderImg{min-height:5vh; max-height:5vh;}
    .sliderDetails {
      border-bottom: 1px solid black;
      padding-bottom: 5px;
      min-height: 20vh;
      max-height:20vh;

      overflow-y: scroll;
      overflow-x: hidden;
    }

<body>
  <div class="container">
    <div class="focus">
      <div>
        <div class="focusDetails">
          <div class="focusTitle"></div>
          <div class="focusDesc"></div>
        </div>
        <div class="previous" style="display:none;"><span></span>
        </div>
        <div class="next"><span></span>
        </div>
      </div>
    </div>
    <div class="sliderContainer">
      <ul class="slider">
        <li>
          <div class="sliderImg"></div>
          <div class="sliderDetails">

            <p class="sliderTitle">Town Hall Meeting Presentation - Sunstar Italiana</p>
            <p class="sliderDesc">On Tuesday, June 30 all Sunstar Italiana employees took part to the Town Hall Meeting presentation made by the General Manager, Marco Bruscaini. Through his</p>

          </div>
        </li>
        <li>
          <div class="sliderImg"></div>
          <div class="sliderDetails">

            <p class="sliderTitle">Top Management Visits the HQ in Etoy</p>
            <p class="sliderDesc">The welcome to the Sunstar Headquarter June Meetings' attendees from Asia, Japan, and the US was done as a tour to the Sunstar Campus' two buildings, the new and previous one The welcome to the Sunstar Headquarter June Meetings' attendees
              from Asia, Japan, and the US was done as a tour to the Sunstar Campus' two buildings, the new and previous one</p>

          </div>
        </li>
        <li>
          <div class="sliderImg"></div>
          <div class="sliderDetails">
            <p class="sliderTitle">Distributor meeting</p>
            <p class="sliderDesc">For the 3rd year we have organized our Distributor meeting taking place this time in our new building in Etoy, Switzerland.This year, we decided to extend our invitation to all the</p>

          </div>
        </li>
        <li>
          <div class="sliderImg"></div>
          <div class="sliderDetails">
            <p class="sliderTitle">Distributor meeting</p>
            <p class="sliderDesc">For the 3rd year we have organized our Distributor meeting taking place this time in our new building in Etoy, Switzerland.This year, we decided to extend our invitation to all the</p>

          </div>
        </li>
      </ul>
    </div>
  </div>
</body>

Answer 2

由flexbox解决。 https://jsbin.com/yutucapuze/1/edit?output

/* **************
   Quick Reset
************** */
html {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/* **********
   Style
********** */
.Rows {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -o-box-orient: horizontal;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -o-box-lines: single;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
.Row {
  -webkit-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0;
  margin: 0;
  height: 500px;
}
.Slider {
  background-color: #333;
  position: relative;
}
.Slider:after {
  content: '50% width & 500px heigth';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #3da7b4;
}
.List {
  border: 1px solid #000;
}
.Item {
  display: block;
  min-height: 25%;
  height: 25%;
  max-height: 25%;
  border: 1px solid #000;
  position: relative;
  overflow: auto;
  background-color: #555;
}
.Item:after {
  content: '25% heigth';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 1rem;
  color: #3da7b4;
}
.Item__content {
  padding: 0;
  margin: 0;
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

<div class="Rows">
  <div class="Row Slider"></div>
  <div class="Row List">
    <div class="Item">
      <p class="Item__content">Lorem ipsum dolor</p>
    </div>
    <div class="Item">
      <p class="Item__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illum fugiat velit a laborum harum molestias</p>
    </div>
    <div class="Item">
      <p class="Item__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illum fugiat velit a laborum harum molestias saepe hic rerum. Aut omnis voluptatum placeat, amet aliquam, alias voluptatibus fugiat beatae quibusdam?</p>
    </div>
    <div class="Item">
      <p class="Item__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni illum fugiat velit a laborum harum molestias saepe</p>
    </div>
  </div>
</div>

HTML / CSS问题表显示

2 个答案: