我对一些CSS和HTML代码感到奇怪。以下代码在浏览器chrome,firefox中使用时效果很好,但是在使用开发人员工具并通过移动视图进行检查时,不知道为什么,但是最低高度:100%;不适用吗?包括屏幕截图。因此,在正常的浏览器中可以正常运行吗,这是为什么呢?谢谢!



*,
*::before,
*::after {
  box-sizing: inherit;
}
* {
  position: relative;
}
a,
body,
footer,
header,
h1,
h2,
html,
img,
li,
p,
section,
span,
sup,
ul {
  background: transparent;
  border: 0;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
html {
  box-sizing: border-box;
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  width: 210%;
}
body {
  background: red;
  color: #FFFFFF;
  height: 100%;
  margin: auto;
  overflow: hidden;
  width: 210%;
}
section {
  display: block;
  float: left;
  height: 100%;
  width: 100%;
}
.test {
  float: left;
  min-height: 100%;
  overflow: hidden;
  width: 20%;
}

<body>
  <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section>
  <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section>
  <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section>
  <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section>
  <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section>
</body>





Chrome的开发工具屏幕截图:



如何使开发工具的高度也达到100%?

任何想法?

谢谢!

最佳答案

内联打开chrome dev工具时,将重新计算最小高度。如果仔细查看页面红色部分的高度,您会注意到它的高度与开发工具窗口的高度相同。将开发工具作为单独的窗口打开,这将解决您的问题。

另一种解决方案是使用视口高度而不是百分比。使用100vh代替100%

10-05 20:57
查看更多