如何從HTML元素的高度中排除div的高度？

我有我的HTML背景設置是這樣的：如何從HTML元素的高度中排除div的高度？

html { 
    background: url("main_bg2.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;  
}

完全一樣，我希望它其中一期工程。背景居中，覆蓋整個瀏覽器窗口並保持成比例。但是，如果我有很多可以擴展頁面高度並使其滾動的內容，那麼我的背景圖像會擴展爲包含大型div的高度，並且會以過大的方式放大。

有沒有辦法從HTML元素的整體高度去除div的高度，以便圖片不會像DIV那樣變大？

有什麼不喜歡讓div滾動瀏覽器窗口而不影響HTML元素的高度？

來源

2016-05-10 user2721815

試着做一個小提琴或樣片，所以我們可以幫助你更快， – mmativ

我建議更改放置背景的容器。根據定義，您通過選擇html元素來定位頁面上的所有內容。我會製作一個容器，並將所有你想要的元素放在背景之前。

<html> 
    <div class="page_container"> 
     <div> Your elements </div> 
    </div> 
    <div> The other components that are stretching your background </div> 
</html>

然後，你可以這樣做：

.page_container { 
    background: url("main_bg2.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;  
}

來源

2016-05-10 02:48:35

如果你使用什麼：

background-attachment: fixed;

？

來源

2016-05-10 02:43:47

我認爲這是什麼原因造成的問題。我把它設置爲固定，但我讀了IOS設備，我需要它設置爲滾動。這個問題似乎只在我的iPad上。 – user2721815

啊gotcha。我認爲其他人給出了更好的答案 –

Fiddle

$(document).ready(function(){ 
    var bodyBG = $('.no-bg').height(); 

    $('body').css('background-positionY', bodyBG); 
});

試試這個，這不是減小了體積，但位置所以需要尺寸更小取決於覆蓋你想排除什麼的高度。

來源

2016-05-10 02:51:30

如何從HTML元素的高度中排除div的高度？

回答

相關問題