맞춤 DIV 내가이 div의이

Question

화면입니다. 나는 "스크롤"을 "헤더"와 화면 하단 사이에있는 모든 높이를 채우고 싶습니다. 그러나 "스크롤"에 100 % 또는 100vh 높이를 설정하면 높이가 채워지지만 화면에 맞지 않는 40px가 더 많이 걸리므로 스크롤바는 브라우저에도 표시됩니다. div "스크롤" 자체 스크롤바가 있습니다.

Answer 1

원하는 경우 CSS3 calc을 사용할 수 있습니다.

width: calc(100% - 40px); 

그러나 모든 브라우저가이 기능을 지원하지는 않습니다.
calc에 대한 브라우저 지원을 보려면 http://caniuse.com/calc을 참조하십시오.

Answer 2

두 가지 방법으로 수행 할 수 있습니다.

div { 
width: calc (100% - 40px); 
} 

또는

div { 
margin: 40px 0 0 40px; 
} 

이 뜻 마진 상단과 좌측

. 스크롤 막대가있는 곳을 가정합니다. 그냥 여백 원하는 경우 나는 .scroll 요소 같은 position:absolute; 줄 것

div { 
    margin-top: 40px; 
    } 

Answer 3

상위 40 PIX는 다음을 수행하십시오 Fiddle Demo

HTML을

<div class="container"> 
    <div class="header"></div> 
    <div class="scroll"></div> 
</div> 

CSS

.container { 
    background-color:yellow; 
    position:relative; 
    height:500px; 
} 
.header { 
    background-color:red; 
    height:40px; 
} 
.scroll { 
    width:100px; 
    position:absolute; 
    top:40px; 
    bottom:0px; 
    left:0px; 
    background-color:blue; 
}