Question

我尝试使用顶部栏创建一个布局，并在其下面创建一个拆分布局。我遇到的问题是width和height应该自动适合浏览器大小。

所以我用桌子试了一下：

body {
  margin: 0;
  padding: 0;
  min-height: 500px;
  min-width: 600px;
}
table {
  border-collapse: collapse;
}
.topbar {
  height: 50px;
  position: relative;
  background: grey;
}
.layout_table {
  height: 100%;
  width: 100%;
}

<body>
  <table class="layout_table">
    <tr>
      <td class="topbar">
        hallo
      </td>
    </tr>
    <tr>
      <table width="100%">
        <td width="20%" style="background: blue;">

        </td>
        <td width="80%" style="background: yellow;">

        </td>
      </table>
    </tr>
  </table>
</body>

JSFiddle

现在结果大多是正确的。问题是第一个表的第二行没有完整的高度。

我该如何解决这个问题？

Answer 1

不应使用<table>元素进行布局，而不建议将元素作为元素仅用于制表内容，而应尝试使用现代替代方法。您尝试执行的操作可以通过calc()和float或flex规范的组合来实现。旧版浏览器更好地支持float属性，但flex（来自CSS3 Flexbox规范）提供了更多布局可能性。

在下面的示例中，我使用了flexbox规范（1）垂直对齐topcontent文本和（2）用于在其下方的蓝色和黄色列之间分配空间。后者可以通过float轻松实现，但避免它的原因是需要正确清除浮动。

＆＃13;

body {
  margin: 0;
  padding: 0;
  min-height: 500px;
  min-width: 600px;
}
.topbar {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: grey;
}
.content {
  display: flex;
  height: calc(100vh - 50px);
  min-height: 450px; /* minimum parent height minus topbar height */
}
.content .c1 {
  width: 20%;
  height: 100%;
  background-color: blue;
}
.content .c2 {
  width: 80%;
  height: 100%;
  background-color: yellow;
}

＆＃13;

<div class="topbar">
  <span>Hello</span>
</div>
<div class="content">
  <div class="c1"></div>
  <div class="c2"></div>
</div>

＆＃13;

表行没有完整的高度

1 个答案: