HTML 文件显示黑屏，即使其中有内容

Question

正如我在 .panel class（其中有一个 postion: relative;）中将 position:absolute; 添加到我的 h3 中一样，一切都开始分崩离析。当我刷新时我仍然得到空白页，我试图从开发工具检查我的元素，当我减少 视口宽度 时，它突然不知从哪里出现。我还注意到 .panel 的宽度现在是 0，但是如何呢？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  display: flex;
  max-width: 90vw;
}

.panel {
  height: 80vh;
  border-radius: 50px;
  margin: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: flex 0.8s ease-in;
  flex: .5;
  cursor: pointer;
  position: relative;
}

.panel h3 {
  position: absolute;
  font-size: 1.5rem;
  bottom: 20px;
  left: 20px;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day-1 Expanding cards</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div class="container">
    <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1619994948937-ef1e758d46ca?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=890&q=80');">
      <h3>Some Heading</h3>
    </div>
    <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1621335819647-09d00a452430?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=668&q=80');">
      <h3>Some Heading</h3>
    </div>
    <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1615653051647-321e464edc86?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');">
      <h3>Some Heading</h3>
    </div>
    <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1606170034762-cbe66ccabbf8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80');">
      <h3>Some Heading</h3>
    </div>
    <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1568056308658-aa380181da25?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1037&q=80');">
      <h3>Some Heading</h3>
    </div>
  </div>
</body>

</html>

Answer 1

尝试将 width 添加到您的 .panel class，并使用实际值（而不是 auto 或 %）。您有一个设置的高度，但仅靠高度不会使元素在页面上占据任何宽度。

当您将 .panel h3 元素更改为 position: absolute 时出现此问题的原因是这些 h3 元素之前赋予了 .panel 宽度。当它们切换到 absolute 时，它们被从文档流中取出并且它们的宽度不再影响 .panel 元素。

Answer 2

精确修复：将 .container 上的 max-width:90vw 更改为 width:90vw，这解决了问题。

发生此问题是因为我没有设置宽度属性，因此容器的宽度为 0，因此没有显示任何内容。另外 Max-width 属于限制，而不是 setting width.

HTML 文件显示黑屏，即使其中有内容

HTML file shows blank screen even though it has content inside it

html

css

css-position

flexbox