高度寬度以百分比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一些奇怪的東西

回答

相關問題