显示表和位置绝对冲突答案

【问题标题】：Display table and position absolute conflicts显示表和位置绝对冲突
【发布时间】：2016-04-16 09:42:41
【问题描述】：

当我在 HTML 中使用 CSS 表格和绝对位置位于表格顶部的黑色图层时，我有一个奇怪的行为。

当层被启用时，(display: block)，那么它就会破坏布局。但是当我禁用 is (display: none) 时，一切都很好。

这是一个小例子（您必须通过开发人员工具更改 css）。有什么我忘记设置的吗？

不能用 flexbox 代替表格！

html,
body {
  width: 100%;
  height: 100%;
}
body {
  display: table;
  table-layout: fixed;
}
#menu {
  display: none;
  background: #28292D;
  width: 200px;
  position: fixed;
  left: -300px;
  top: 0;
  height: 100%;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
  z-index: 3;
}
#blackLayer {
  background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  display: none;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
  height: 1265px;
  display: block;
}
#sidebar {
  display: table-cell;
  vertical-align: top;
  width: 223px;
  background: #3d464d none repeat scroll 0 0;
}
#content {
  display: table-cell;
  vertical-align: top;
  background: #f0f0f0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="menu"></div>
  <div id="blackLayer"></div>
  <div id="sidebar"></div>
  <div id="content"></div>
</body>
</html>

【问题讨论】：

一个表是一个显示值，如果你改成block就破坏了这个表。
这不是我写的。我不会将表格更改为阻止。我将图层更改为块/无，并且图层具有绝对位置。
图层位于显示表格元素内，即您的身体。至少不是一个好的做法，并且表格布局被破坏了，因为如果您更改所有标记，您将获得正确的行为而无需奇怪的编码

标签： html css css-position css-tables

【解决方案1】：

更新：

我认为你的标记是错误的。将#sidebar 和#content 包裹在另一个#container 中，并给它一个display:flex; 和position:absolute; 和一个min-height:100%;。 Flex 的align-items:stretch; 将使您的侧边栏和内容将它们的高度拉伸到父高度。

试试这样：

* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#container {
  display: flex;
  width: 100%;
  min-height: 100%;
  position: absolute;
  flex-direction: row; /* children will fall side by side like columns */
  align-items: stretch; /* children will stretch to my height */
}
#menu {
  display: none;
  background: #28292D;
  width: 200px;
  position: fixed;
  left: -300px;
  top: 0;
  height: 100%;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
  z-index: 3;
}
#blackLayer {
  background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  display: none;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
  height: 100%;
  display: block;
}
#sidebar {
  width: 223px;
  background: #3d464d none repeat scroll 0 0;
}
#content {
  flex: 1 0; /* Now I will take remaining space left by my sister Ms. #sidebar */
  background: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div id="menu"></div>
  <div id="blackLayer"></div>
  <div id="container">
    <div id="sidebar"></div>
    <div id="content"></div>
  </div>
</body>

</html>

【讨论】：

结果不一样。侧边栏现在是不可见的，并且没有页面的完整高度。我也看不出table-cell 对具有position: absolute 的div 有影响。
将table-cell 元素和任何其他类型的元素放在同一个容器中并不是一个好主意。就像您不会将<div> 和<td> 放在一起。无论如何，我为#container 设置了一个高度，它使侧边栏和内容可见。
我有那个标记是因为我总是想要侧边栏中的完整高度。这意味着如果页面的内容没有填充 100%，我想要 100% 的窗口高度。如果它大于窗口的高度，我想要 100% 的内容高度。现在，如果没有 javascript，这将无法正常工作。
这是一个 flexbox 解决方案。这对我不起作用，因为我正在使用动态滚动表，如果我之前使用的是 flexbox，那将不起作用。