Question

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

启用图层（display: none）后，它会破坏布局。但当我禁用（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; }）时，一切都很好。

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

使用flexbox而不是表格是不可能的！

<!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>

var config = require('path/to/config');

function makAppAppHtml () {
        runSequence(
          'makeTemplate',
          'make_css_bundle',
          'rename_css_bundle',
          'make_js_bundle',
          'rename_js_bundle',
          function () {
              makeAppIndex('index-aa.html');
          });
}

function makeTemplate () {
    return gulp.src(config.aaTemplates)
            .pipe(print(function (file) {
                return "Added file " + file + " to template";
            }))
         .pipe(minifyHTML({ collapseWhitespace: true }))
         .pipe(templateCache({ standalone: true, root: '/app' }))
         .pipe(gulp.dest(config.destPartials))
         .pipe(gzip(gzip_options))
         .pipe(gulp.dest(config.destPartials));
  });
}

gulp.task('make_prod_aa', makAppAppHtml);
gulp.task('makeTemplate', makeTemplate);

Answer 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>

显示表和位置绝对冲突

1 个答案: