Question

我有三个div标签，按百分比绝对定位。三个div标签垂直放置在一列，顶部中间和底部，宽度为：100％。中间div标签有display：table，当且仅当中间div标签内有其他元素时，才会根据窗口大小显示一个小间隙。是否需要使用一些额外的CSS来获取显示：表停止产生间隙？

这是指向小提琴的链接：[https://jsfiddle.net/3x1k3d8u/]

这里是div的布局：

<body>
  <div id="top">
  </div>
  <div id="middle">
    <div id="problem">
    </div>
  </div>
  <div id="bottom">
  </div>
</body>

这里是CSS：

body{
  background-color:#f00000;
}
#top {
  background-color: #303030;
  display: table-cell;
  height: 37.5%;
  left: 0%;
  position: absolute;
  top: 0%;
  width: 100%;
}
#middle{
 background-color:#383838;
 display:table;
 height:25%;
 left:0%;
 position:absolute;
 top:37.5%;
 width:100%;
}
#problem{
  /*display:none;*/
}
#bottom {
  background-color: #404040;
  display: table-cell;
  height: 37.5%;
  left: 0%;
  position: absolute;
  top: 62.5%;
  width: 100%;
}

要重新创建问题，请运行小提琴并调整窗口的高度。您应该会看到中间和底部div标签之间出现一条细长的红色水平线。如果您更改中间div标签上的display：table或完全删除中间div标签内的元素，此行将消失。

Answer 1

你错过了css文件第3行的分号。

#container {
  display: table;
  height: 100% width: 100%;
}

到

#container {
  display: table;
  height: 100%;
  width: 100%;
}

为什么display：table在绝对定位的div标签之间留有空隙并且可以修复吗？

1 个答案: