我有三个按百分比绝对定位的 div 标签。三个 div 标签垂直放置在一列中，顶部中间和底部，宽度为:100%。中间的 div 标签有 display:table，当且仅当中间的 div 标签内有其他元素时，这会导致根据窗口大小出现一个小间隙。是否需要使用一些额外的 CSS 来让 display:table 停止生成间隙？
这是 fiddle 的链接:[ 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%;
}
要重现问题，请运行 fiddle 并调整窗口的高度。您应该会看到中间和底部的 div 标签之间出现一条红色的细水平线。如果您更改中间 div 标签上的 display:table 或完全删除中间 div 标签内的元素，此行将消失。
最佳答案
你在 css 文件的第 3 行漏掉了一个分号。
#container {
display: table;
height: 100% width: 100%;
}
到
#container {
display: table;
height: 100%;
width: 100%;
}
关于html - 为什么显示:table put a gap between absolutely positioned div tags and can it be fixed?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34444110/