绝对位置背景为页面高度的100％ [英] Absolute position background 100% of page height

问题描述

我在给绝对定位的元素设置100％的高度时遇到麻烦，因此它不能覆盖整个页面，而不仅仅是整个屏幕高度。

I am having trouble with giving my absolute positioned element a 100% height so it covers the entire page rather than just the screen height.

我正在使用LESS和

html, body {
    height: 100%;
    position: relative;
}

div#top-bar {
    background: #333;
    height: 50px;
    width: 100%;
}

nav#primary {
    background: #333;
    bottom: 0;
    min-height: 100%;
    left: -100%;
    padding-top: 50px;
    position: absolute;
    top: 0;
    width: 100%;
}

这给了我 nav＃primary 100％的高度，但这不是页面高度，而是屏幕高度。

This gives me a nav#primary height of 100% but that isn't the page height, it's the screen height.

查看此图片：

See this image:

我希望背景为页面的整个高度，而不是屏幕（因此它涵盖了整个 nav＃primary ）

I want the background to be the full height of the page, not the screen (so it covers the entire nav#primary)

推荐答案

nav#primary {
background-image:url(../images/onlinekhabar.jpg);
        background-size:100% 100%;
}

这篇关于绝对位置背景为页面高度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！