패딩 - 상단 사용시 스크롤 영역이 잘립니다.

Question

고정 헤더가있는 부트 스트랩 템플리트로 작업하고 있습니다. padding-top을 사용하여 내용을 설정하고 있습니다 (헤더를 숨기지 않으려면 this plnkr 참조).

본문에는 hidden으로 설정된 overflow이있어 UI (사이드 바, 컨텍스트 메뉴 등)의 다른 모든 부분은 현재 브라우저의 뷰포트에 국한됩니다. 나는 콘텐츠를 overflow-y을 사용하는 경우

문제는 시작, 내가 100vh에 height을 설정하려고하고 다시 스크롤을 제공하지만, 내용은 전혀 그럴듯 하단에 차단하지만 난 아무 생각이 무엇이 없다 그것에 대해.

간단한 해결책이 있습니까?

Answer 1

html, 
body { 
    height: 100%; // <--- 
} 
section { 
    color: white; 
    padding-top: 50px; 
    height: 100%; // <--- 
    font-family: "Segoe UI"; 
    font-size: 14pt; 
    box-sizing: border-box; // <--- 
} 
section div { 
    overflow-y: auto; 
    height: 100%; // <--- 
    padding: 10px; 
    box-sizing: border-box; // <--- 
} 

Plunker

는 생각은 html, body, section 그들이 뷰포트 정확하게 높은 뻗어있다 그래서 section divheight: 100%하고 있습니다.

box-sizing: border-box을 section 및 section div에 추가해야합니다.이 높이에 패딩이 포함됩니다.

section div에 overflow-y: auto;을 넣으면 내용이 section div 안에 스크롤됩니다.

Answer 2

포함 된 div의 CSS에 margin을 적용하십시오. 이의 라인을 따라

뭔가 :

section { 
    overflow-y: auto; 
    margin-bottom: 20px; // adjust accordingly 
} 

Answer 3

봅니다 주위 92vh or 93vh에 높이를 설정하고 그

section div { 
    overflow-y: auto; 
    height: 93vh; 
    padding: 10px; 
}