절대 위치 배경 페이지 높이의 100 %

절대 위치 요소를 100 % 높이로 지정하여 화면 높이가 아닌 페이지 전체를 덮는 데 문제가 있습니다.절대 위치 배경 페이지 높이의 100 %

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

이 나에게 100 %의 nav#primary 높이를 제공하지만, 그것은 화면 높이 페이지 높이입니다하지 않습니다.

이 이미지 참조 : Android image

나는 배경이 페이지의 전체 높이가 아닌 화면되고 싶어를 (그래서 전체 nav#primary 포함)

출처

2013-08-12 Party Pete

일단'패딩 정상 제거 : 50 픽셀을,'에서 탐색 #의 primary''체크. –

여전히 문제가 20px와 같이 더 적습니다. 상단 바 (50px 높이)를 지우려면 패딩 상단이 필요합니다. –

'nav # primary'에'left : 0'과'right : 0'을줍니다. (왼쪽에서 -100 %; 제거) –

당신의 CSS이 추가

nav#primary { 
    overflow: auto; 
}

출처

2013-08-12 08:51:36 Maria

좋아요, 지금 이상한 오버 플로우 문제가 있습니다. overflow-y : auto로 시도하는 것보다 이미지를 볼 수 있습니까 : http://i.imgur.com/PaV4Tby.png –

? 초기 문제는 div의 높이가 뷰포트의 100 %이며 자동이 아니고 오버플로가 기본적으로 표시된다는 것입니다. 따라서 스크롤 바를 본문 대신 div에 추가해야합니다. – Maria

좋아, 그건 다른 스핀을 사물에 넣었 어. 내가 무엇을 생각해 낼지 알 것이다. –

nav#primary 페이지의 다른 모든 콘텐츠가 포함되어 있지 않으면 height: 100%으로 설정할 수 없습니다. body 요소에서 배경 이미지 사용을 고려 했습니까? background-size: cover;과 같이 이미지를 화면에 채울 수 있습니다.

출처

2013-08-12 08:58:23

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

출처

2013-08-12 09:02:34

첫째, 많은 도움을 주신 데 대해 감사드립니다.

나는 어떻게 든이 일을 할 수있었습니다. 나의 첫 번째 단계는 nav#primary에서 절대 위치 지정을 제거하고 left 옵션 대신 margin-left 옵션을 사용하는 것입니다. 나는 또한 왼쪽으로 뜨고 인라인으로 표시해야했습니다.

내 콘텐츠의 경우 div#main 왼쪽으로 띄워서 인라인으로 표시해야했습니다. 이것은 내 모바일에 대한 첫 번째 접근 방식 인 I position:absolute입니다 (내 탐색 도구로 오버레이 할 수 있습니다). 내 작은 미디어 쿼리 (min-height: 768px), 다시 기본 (정적) 위치를 설정하십시오.

내 jQuery에서이 코드를 추가하여 창 높이에 따라 최소 높이를 변경해야했습니다. (참고 : 최소 높이되지 높이)

menu.css('minHeight', (jQuery(window).height() - 50) + 'px');

-50 내 topbar 높이를 제거하는 것이었다.

결과 :

모바일 :

Android

이 태블릿 :

Tablet

출처

2013-08-12 09:29:37

그것은 B의 몸에 상대적인 자세를 설정하십시오. 컨테이너에 nav 태그를 감싸고 상대 위치를 지정하십시오.

이와 비슷한 것.

HTML :

<body> 
    <header id="topbar"></header> 
    <section id="container"> 
     <nav id="primary"></nav> 
    </section> 
</body>

CSS :

html, body { 
    height: 100%; 
} 

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

section#container { 
    padding-top: 50px; 
    position: relative; 
    min-height: 100%; 
    width: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box; 
    background: #333; 
} 

nav#primary { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
}

출처

2013-08-12 20:53:57

절대 위치 배경 페이지 높이의 100 %

답변

관련 문제