Question

这个问题可能很简单，但我找不到答案。

我有以下html：

Analyzing dependencies
The following pod updates are available:
- Kingfisher 4.0.0 -> 4.0.0 (latest version 4.2.0)
- Lokalise 0.7.0 -> 0.7.0 (latest version 0.7.1)
- LokaliseLiveEdit 0.2.2 -> 0.2.2 (latest version 0.2.3)
- Realm 3.0.0 -> 3.0.0 (latest version 3.0.2)
- RealmSwift 3.0.0 -> 3.0.0 (latest version 3.0.2)
- SwiftLint 0.23.0 -> 0.23.0 (latest version 0.24.0)
- SwiftyJSON 3.1.4 -> 3.1.4 (latest version 4.0.0)
- Tabman 1.0.6 -> 1.0.6 (latest version 1.0.7)

和css：

<div>
  some text
  <div>
    <table>
        <tr><td>
            Test
        </tr>
    </table>
  </div>
</div>

如何在不{/ 1>}的高度属性更改的情况下垂直拉伸表格？我希望body,html { height: 100%; width: 100%; margin: 0; } table { height: 100%; margin: 0 auto; background: red; }拥有div，但它不起作用，因为外部容器没有固定的高度（据我所知）。

http://jsfiddle.net/8qedxug9/

Answer 1

将height: 100%提供给div元素。如果您不想滚动，请添加overflow:hidden;。

body,html {
    height: 100%;
    width: 100%;
    margin: 0;
}

div{
  height: 100%;
  overflow:hidden;
}

table {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    background: red;
}

<div>
  some text
  <div>
    <table>
        <tr>
          <td>
            Test
          </td>
        </tr>
    </table>
  </div>
</div>

Answer 2

要将height属性更改为始终具有100％的窗口高度，您应该使用view height CSS单位，如下所示：

body,html {
    height: 100%;
    width: 100%;
    margin: 0;
}

table {
    height: 95vh;
    margin: 0 auto;
    background: red;
    width: 100%;
}

<div>
  some text
  <div>
    <table>
        <tr><td>
            Test
        </tr>
    </table>
  </div>
</div>

Answer 3

如果HTML元素的默认宽度和高度相对于其父元素。因此，在这种情况下，表格是其父Div元素高度的100％。因此，桌子所在的Div也需要有100％的高度。

在你的小提琴中，为所有div添加100％的高度使div伸展到身高的100％，因此桌子也伸展到100％高度：

body,html {
    height: 100%;
    width: 100%;
    margin: 0;
}
div {
    height: 100%;
}

table {
    height: 100%;
    margin: 0 auto;
    background: red;
}

td {
    vertical-align: top;
}

Answer 4

为了相对地（height）声明元素的%，您需要声明其父元素的height。因此，您需要声明height的{{1}}：

divs

CSS：

<div>
  some text
  <div>
    <table>
        <tr><td>
            Test
        </tr>
    </table>
  </div>
</div>

如何拉伸桌子以填充所有可用空间

4 个答案: