如何从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的高度？

回答

相关问题