桌子内div的全高

Question

是否可以将以下div对齐在任何网页上的相同位置宽度和高度？我尝试过任何东西，但我无法让它发挥作用。我的代码中有些内容不兼容。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsfiddle

我无法解决这个问题。

这是图片alignment of divs

非常感谢你！

Answer 1

删除HTML代码的样式属性和宽度，高度属性，如果使用CSS则不需要它。

如果你想要一个静态表，也不要在宽度y上使用％。

<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
    <tr style="height:100% ">
    <td style="background-color: aqua;height: 50%">1</td>

Answer 2

class CallableAttribute: def __init__(self, owner, name): self.owner= owner self.name= name setattr(owner, name, self) self(None) def __call__(self, value): setattr(self.owner, '_'+self.name, value) return self.owner @property def _value(self): return getattr(self.owner, '_'+self.name) def __eq__(self, other): return self._value==other class Person(object): def __init__(self): CallableAttribute(self, 'age') CallableAttribute(self, 'gender') td height 100%。然后使用calc属性设置.content-box-orange .content

的高度

fiddle

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用Flexbox

以下是使用flexbox在图像中实现布局的粗略指南。有关浏览器兼容性信息，请参阅caniuse。您可以在Chrome开发工具中切换属性，以了解Flexbox属性如果适用于您的新工作方式。

fiddle

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

将style="height:100%;overflow:hidden;"提供给外div和style="height:100%;"提交content＆amp; td

＆＃13;

＆＃13;

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

.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 .content {
  overflow: hidden;
  padding: 10px;
  font-size: 15px;
  border: 0px;
  color: #000;
  background: #FFFFFF;
}

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

＆＃13;

<table border="0" cellspacing="5" cellpadding="5">
  <tbody>
    <tr>
      <td colspan="2" rowspan="3" style="height:100%;">





        <div class="content-box-orange" style="height:100%;overflow:hidden;">
          <div class="titleorange">3</div>
          <div class="content" style="height:100%;">Lorem Ipsum is simply dummy text</div>
        </div>



      </td>
    </tr>
    <tr>
      <td style="background-color: aqua;height: 50px">1</td>
    </tr>
    <tr>
      <td style="background-color: aqua;height: 50px">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" style="height:100%;">
        <div class="content-box-gray" style="height:100%;overflow:hidden;">
          <div class="title">7</div>
          <div class="content" style="height:100%;">Lorem Ipsum</div>
        </div>
      </td>
    </tr>
    <tr>
      <td style="background-color: #FFF">6</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;