如何在一些更多的內容上放置100％的高度div？

我有一個全屏幕圖像的登錄頁面作爲舞臺。然後，您可以向下滾動查看更多內容。底部是一個頁腳。如何在一些更多的內容上放置100％的高度div？

landingpage 
    fullscreen image (height 100%) 
    content below that image 
footer

我該如何做到這一點？

對於圖像高度的工作，我需要設置登陸頁面高度爲100％。但是，頁腳在着陸頁內的其他內容之下到達圖像的下方。

如果我將圖片絕對定位並且其高度爲100％，則目標網頁內的內容會覆蓋圖片。

編輯：按要求的一些代碼。我想讓舞臺的高度達到100％。

<div id="landing"> 
    <div id="stage"></div> 
    Some more content... 
</div> 
<div id="footer"></div>

來源

2015-11-06 obiwahn

不錯的概念現在顯示我們的代碼;） –

實際上，如果您使用標題/內容/頁腳，您可能應該使用div並設置背景圖像或將圖像放到div上。比你可以將圖像跨越100％。猜猜你的問題是你沒有設置身體和其他內容 – Dwza

您可以使用<section>標籤與CSS height: 100vh

<body id="landing"> 
    <header></header> <!-- navigation or logo + full-width --> 
    <section id="stage"> 
     <img src="" alt=""> <!-- absolute --> 
    </section> <!-- 100% height + full-width --> 
    <section></section> <!--other content + full-width--> 
    <footer></footer> <!--full-width--> 
</body>

更多關於Css Units

來源

2015-11-06 17:16:38 juanmnl

使用height: calc (100% - "your footer px height")圖像和頁腳"your footer px height"

或者用js/jQuery的用於計算它自己，這就是1行代碼

$(".image").css({ 
    height: $(window).height() - $(".footer").height() 
});

來源

2015-11-06 16:54:13

如何在一些更多的內容上放置100％的高度div？

回答

相關問題