Question

我有一张简单的表格：

<body>
  <div class="wrapper">
    <div class="board">
     <div class="line">
        <div class="position"></div>
        <div class="position"></div>
        <div class="position"></div>
      </div>
      <div class="line">
        <div class="position"></div>
        <div class="position"></div>
        <div class="position"></div>
      </div>
      <div class="line">
        <div class="position"></div>
        <div class="position"></div>
        <div class="position"></div>
      </div>
     </div>
    </div>
  </div>
</body>

用这个Css：

.wrapper {
    width: 80%;
    height: 80%;
    margin: auto;
}
.board {
    background-color: #37392e;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.line {
    display: table-row;
}
.position {
    background-color: #DDCECD;
    display: table-cell;
    width: 33%;
}

当我指定尺寸和高度时，div不显示。我不会在div中使用文本，而是在他们的css“background”属性中显示图像。如何强制表元素遵循以％表示的大小。

Answer 1

将body，html高度设置为100％，然后您就可以使用board中% div的高度

高度为％的工作代码：

＆＃13;

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  width: 80%;
  height: 80%;
  margin: auto;
}
.board {
  background-color: #37392e;
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}
.line {
  display: table-row;
}
.position {
  background-color: #DDCECD;
  display: table-cell;
  width: 33%;
}

＆＃13;

<div class="wrapper">
  <div class="board">
    <div class="line">
      <div class="position"></div>
      <div class="position"></div>
      <div class="position"></div>
    </div>
    <div class="line">
      <div class="position"></div>
      <div class="position"></div>
      <div class="position"></div>
    </div>
    <div class="line">
      <div class="position"></div>
      <div class="position"></div>
      <div class="position"></div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

这是因为正文高度等于零且0的80％仍为0.您需要为包装器设置特定高度，您可以使用HTML5 vh单位将其设置为视图的80％端口。

.wrapper {
    width: 80%;
    height: 80vh;
    margin: auto;
}

Answer 3

如果要使用百分比（％）的高度，则需要设置父级高度。只需在body和html标签上添加100％的高度。

＆＃13;

html, body{
 height: 100%; 
}
.wrapper {
    width: 80%;
    height: 80%;
    margin: auto;
}
.board {
    background-color: #37392e;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.line {
    display: table-row;
}
.position {
    background-color: #DDCECD;
    display: table-cell;
    width: 33%;
}

＆＃13;

<body>
  <div class="wrapper">
    <div class="board">
      <div class="line">
        <div class="position"></div>
        <div class="position"></div>
        <div class="position"></div>
      </div>
      <div class="line">
        <div class="position"></div>
        <div class="position"></div>
        <div class="position"></div>
      </div>
      <div class="line">
        <div class="position"></div>
        <div class="position"></div>
        <div class="position"></div>
      </div>
    </div>
  </div>
</body>

＆＃13;

Css显示表不以百分比表示的大小

3 个答案: