絕對定位和改變固定高度

我正在與很多絕對和相對的位置合作，以獲得此項目的正確佈局。正如你可以在我的小提琴中看到的那樣，黑色背景的高度設置爲固定高度，因爲如果我不這樣做，它不會顯示。絕對定位和改變固定高度

我的問題是，如果有一種方法來設置這個高度正好填滿窗口？因爲與固定高度，你已經有了一個滾動條或空白，我正在努力避免

HTML

<div class="section"> 
    <div class="header"> 
    <img src="http://placehold.it/100x100&text=logo" alt="logo" /> 
    </div> 
    <div class="header-bg"></div> 
</div> 

<div class="box"> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius aspernatur nemo voluptatem provident fuga  beatae. Dolore explicabo laborum laboriosam debitis eligendi rerum quis nam facere inventore magnam eum nisi sed 
    </p> 
</div> 
<div class="box-bg"></div>

CSS

.section { 
    height: 150px; 
    margin-bottom: 20px; 
} 
.header { 
    position: absolute; 
    z-index: 100; 
    width: 100%; 
} 
.header img { 
    display: block; 
    margin: 0 auto; 
    width: 100px; 
} 
.header-bg { 
    position: relative; 
    top: 25px; 
    background: green; 
    height: 50px; 
    width: 100%; 
} 
.box { 
    position: absolute; 
    z-index: 200; 
    width: 100%; 
} 
.box p { 
    width: 300px; 
    height: 200px; 
    background: lightgrey; 
    margin: 0 auto; 
} 
.box-bg { 
    position: relative; 
    top: 100px; 
    background: black; 
    height: 600px; 
}

來源

2015-04-21 AC3

如果我正確的話，將身體背景設置爲黑色，這樣它將適合整個窗口，如果沒有設置HTML和身體高度100％ - gues這應該工作 – UnskilledFreak

而不是使用高度，使用底部位置:(並將位置改爲絕對）。

.box-bg { 
    position: absolute; 
    top: 270px; 
    background: black; 
    bottom: 0; 
    width: 100%; 
}

Updated Fiddle

來源

2015-04-21 11:50:48 LinkinTED

謝謝，我沒有考慮絕對定位的背景，一個簡單的解決方案，完全適合 – AC3

的CSS視口高度可以用來實現這樣的事情，但是這取決於哪些瀏覽器要支持：http://caniuse.com/#feat=viewport-units

此外，從小提琴其很難想象你想要什麼實現。你可以解釋嗎？

黑色區域可能只是一個身體背景顏色？

來源

2015-04-21 11:57:47 vibesniper

是的，我發現了一個解決方案，通過使用vh的高度，但它不支持一些較舊的瀏覽器版本。 – AC3

深色背景的問題是它必須在內容框中間開始。我不認爲這可以通過使用背景位置的純色來解決 – AC3

絕對定位和改變固定高度

回答

相關問題