高度宽度以百分比CSS html一些奇怪的东西

我得到了一些奇怪的事情与一些CSS和HTML代码。下面的代码在浏览器Chrome，Firefox中使用时效果很好，但是当使用开发人员工具并使用移动视图时不明白为什么，但最小高度：100％;不适用？包括一个截图。因此，在正常的浏览器工作正常任何想法这是为什么？谢谢！高度宽度以百分比CSS html一些奇怪的东西

*, 
 
*::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的开发工具截图：

screenshoot

怎样才能使它在开发工具也是100％的高度？

有什么想法？

THX！

来源

2016-10-03 derder

我认为它是因为开发人员工具从100％离开窗口的百分之71而不是100％。 – Keith

你没有打开'body'tag（有第二开口头标记） – Johannes

不解决这个事情之前关闭'head'标签：X和开发工具是相同的结果100％的窗口。：\ – derder

在内嵌式打开chrome开发工具时，正在重新计算最小高度。如果仔细观察红色页面部分的高度，您会注意到它的高度与开发工具窗口的高度相同。打开开发工具作为一个单独的窗口，这将解决您的问题。

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

来源

2016-10-03 17:41:54

谢谢！它与100vh相同，但是不显示背景颜色。这有点奇怪，为什么要这样做，但是100vh是一个更好的选择。但仍然不知道为什么它不是100vh，因为它意味着视口高度的100％。：_ – derder

-1

你原来的问题包含</style><head><body>而不是</style></head><body>（注意head前加/）。

修复此问题可能会解决您的问题。

来源

2016-10-03 17:55:05

不是。 :(我会很高兴，如果这将是问题，但它不是：x – derder

高度宽度以百分比CSS html一些奇怪的东西

回答

相关问题