以百分比形式使用高度時div的位置不正確

我不確定這個問題是否曾經發布過，但我不知道如何有效地提出這個問題。以百分比形式使用高度時div的位置不正確

在我的網站中，我一個接一個地創建了兩個大的部分（不是指標籤），一個人的身高設置爲100％，另一個設置爲90％。我在第二部分的正下方添加了一個div。爲了保持div卡住，我已經將「top」設置爲190％，以便模擬這兩部分的長度。儘管我已經爲每個部分設置了最小高度，這使得div在停止調整大小時在部分下方爬行。

我怎樣才能避免這一點，而使用「位置：絕對」的元素？（使用一個較大的部分）

HTML例如：

<html> 
    <body> 
     <div class="section1"></div> 
     <div class="box"></div> 
    </body> 
</html>

CSS例子：

.section1 { 
    display: inline-block; width: 100%; height: 100%; min-height: 500px; 
    position: absolute; 
} 
.box { 
    width: 100%; height: 200px; 
    position: absolute; top: 100%; margin-top: 50px; 
}

感謝，

喬納森

來源

2016-10-26 Jonathan Fogelström

只要不使用position:absolute。

我假設你有它的原因是因爲你需要身高100％的視口，而不使用JS。您可以使用vh設備，但它沒有最好的支持/可靠性。

最簡單的方法是簡單地設置html和body到height:100%;：

body, 
 
html { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.full { 
 
    height: 100%; 
 
    background: teal; 
 
} 
 
.shorter { 
 
    height: 90%; 
 
    background: #fbfbfb; 
 
} 
 
footer { 
 
    background: #222021; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 10px; 
 
}

<section class="full"></section> 
 
<section class="shorter"></section> 
 
<footer>Made with love by a kitten</footer>

請注意，我沒有添加額外的CSS樣式爲目的。

來源

2016-10-26 18:36:30

這工作，謝謝！：D –

@JonathanFogelströmnp，很高興能幫到你：D –

以百分比形式使用高度時div的位置不正確

回答

相關問題