绝对位置背景 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，这是我目前所拥有的:

I am using LESS and this is what I have so far:

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%;
}

这给了我 100% 的 nav#primary 高度，但这不是页面高度，而是屏幕高度.

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

看这张图片:

我希望背景是页面的全高，而不是屏幕(所以它覆盖了整个nav#primary)

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

推荐答案

将此添加到您的 CSS

Add this to your CSS

nav#primary {
    overflow: auto;
}

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