html - table 内div的全高

是否可以将以下div对齐，使其在任何网页上始终保持相同的位置宽度和高度？我已经尝试过任何方法，但无法设法使其正常工作。我的代码不兼容。

.content-box-gray .content {
  overflow: hidden;
  padding: 10px;
  font-size: 15px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid gray;
  color: #3385FF;
}

.content-box-gray .title {
  height: 30px;
  line-height: 30px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: gray;
  font-size: 18px;
  font-weight: bold;
  font-family: verdana;
  display: block;
  color: white;
  display: block;
  padding: 10px;
  border: 1px solid gray;
  border-bottom: none;
}

<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
  <tbody>
    <tr>
      <td colspan="2" rowspan="3">
        <div class="content-box-orange">
          <div class="titleorange">3</div>
          <div class="content">Lorem Ipsum is simply dummy text</div>
        </div>
      </td>
    </tr>
    <tr style="height:100% ">
      <td style="background-color: aqua;height: 50%">1</td>
    </tr>
    <tr>
      <td style="background-color: aqua;height: 50%">2</td>
    </tr>
    <tr>
      <td colspan="3" style="background-color: #FFF">4</td>
    </tr>
    <tr>
      <td style="background-color: #FFF">5</td>
      <td colspan="2" rowspan="2">
        <div class="content-box-gray">
          <div class="title">7</div>
          <div class="content">Lorem Ipsum</div>
        </div>
      </td>
    </tr>
    <tr>
      <td style="background-color: #FFF">6</td>
    </tr>
  </tbody>
</table>

jsfiddle

我无法解决它。

这是图片alignment of divs

非常感谢你！

最佳答案

给td一个height的100%。然后使用calc属性设置.content-box-orange .content的高度

fiddle

我认为您可以为此布局探索flexbox而不是表格。如果您愿意，请更新您的问题...

html,
body {
  height: 98%;
  background-color: #E5E5E3
}

table tbody tr td {
  height: 100%;
}

.content-box-gray .content {
  overflow: hidden;
  padding: 10px;
  font-size: 15px;
  border: 0px;
  color: #3385FF;
  background: #FFFFFF;
}

.content-box-gray .title {
  height: 30px;
  line-height: 30px;
  background: #F1F1F1;
  font-size: 18px;
  font-weight: bold;
  font-family: verdana;
  display: block;
  color: #464648;
  display: block;
  padding: 10px;
  border: 0px;
  border-bottom: none;
}

.content-box-orange {
  height: 100%;
}

.content-box-orange .content {
  overflow: hidden;
  padding: 10px;
  font-size: 15px;
  border: 0px;
  color: #000;
  background: #FFFFFF;
  height: calc(100% - 66px);
}

.titleorange {
  height: 30px;
  line-height: 30px;
  background: #F78D27;
  font-size: 18px;
  font-weight: bold;
  font-family: verdana;
  display: block;
  color: #FFF;
  display: block;
  padding: 10px;
  border: 0px;
  border-bottom: none;
}

<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
  <tbody>
    <tr>
      <td colspan="2" rowspan="3">
        <div class="content-box-orange">
          <div class="titleorange">3</div>
          <div class="content">Lorem Ipsum is simply dummy text</div>
        </div>
      </td>
    </tr>
    <tr style="height:100% ">
      <td style="background-color: aqua;height: 50%">1</td>
    </tr>
    <tr>
      <td style="background-color: aqua;height: 50%">2</td>
    </tr>
    <tr>
      <td colspan="3" style="background-color: #FFF">4</td>
    </tr>
    <tr>
      <td style="background-color: #FFF">5</td>
      <td colspan="2" rowspan="2">
        <div class="content-box-gray">
          <div class="title">7</div>
          <div class="content">Lorem Ipsum</div>
        </div>
      </td>
    </tr>
    <tr>
      <td style="background-color: #FFF">6</td>
    </tr>
  </tbody>
</table>

使用Flexbox

这是使用flexbox实现图像布局的粗略指南。有关浏览器兼容性信息，请参考caniuse。您可以在Chrome开发工具中切换属性，以了解Flexbox属性是新功能的工作原理。

fiddle

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  height: 100%;
}

body {
  background: #FFF;
  font-family: sans-serif;
  height: 100%;
  margin: 0;
  padding: 5px;
}

.box,
.main {
  border: 5px solid #43c2eb;
}

.title--orange {
  background: orange;
  text-align: center;
  padding: .4em;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row {
  display: flex;
  min-height: 200px;
  flex: 1 1 auto;
}

.box-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.box {
  margin: 5px;
  display: flex;
  flex-direction: column;
}

.box--big {
  flex: 2 1 auto;
}

.box--small {
  flex: 1 1 auto;
}

.main {
  align-items: center;
  justify-content: center;
  margin: 5px;
}

.content {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
}

<div class="wrapper">
  <div class="row upper">
    <div class="box box--big">
      <h1 class="title--orange">div header</h1>
      <div class="content">
        content
      </div>
    </div>
    <div class="box-wrap">
      <div class="box box--small">
        <div class="content">content</div>
        <h2 class="title--orange">div header</h2>
      </div>
      <div class="box box--small">
        <div class="content">content</div>
        <h2 class="title--orange">div header</h2>
      </div>
    </div>
  </div>
  <div class="row main">
    <div class="main__inner">content</div>
  </div>
  <div class="row lower">
    <div class="box-wrap">
      <div class="box box--small">
        <div class="content">content</div>

      </div>
      <div class="box box--small">
        <div class="content">content</div>

      </div>
    </div>
    <div class="box box--big">
      <h1 class="title--orange">div header</h1>
      <div class="content">
        content
      </div>
    </div>

  </div>
</div>

关于html - table 内div的全高，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43515268/