디스플레이 안의 여백 : 표 셀이 지난 컨테이너까지 확장됩니다.

Question

내 레이아웃의 열이 height: 100%으로 끝까지 확장되도록하려면 display: table 및 display: table-cell을 사용하고 있습니다.

이 내 마크 업입니다 :

<div class="container"> 
    <div class="subcontainer"> 
     <div class="menu"> 
      <p>test</p> 
     </div> 
    </div> 
</div> 

CSS :

html{ 
    height: 100%; 
    overflow-y: scroll; 
    background: white; 
} 

body{ 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background: red; 
} 

.container{ 
    height: 100%; 
    display: table; 
    margin: 0; 
    padding: 0; 
} 

.subcontainer{ 
    display: table-cell !important; 
    height: 100%; 
} 

.menu{ 
    background: green; 
    height: 100%; 
    padding-top: 10px; 
} 

바이올린 : http://jsfiddle.net/LbELK/

문제 : 가 좀 padding-top.menu에 추가 할. 문제는이 패딩은 모든 종류의 문제가 발생, 부모 컨테이너를지나 확장 .menu 원인이다 : 나는 display: table-cell; 내 요소 가스켓 및 여백을 사용하고자하는

. 그러나 요소를 통해 컨테이너를지나 가게합니다. 이 문제를 어떻게 해결할 수 있습니까?

이 문제는 IE11 및 FireFox 27.0.1에서 발생합니다. 크롬 33은 괜찮은 것 같습니다.

Answer 1

당신은 당신의 .menu에 박스 크기를 추가 할 수

.menu{ 
    background: green; 
    height: 100%; 
    padding-top: 10px; 
    -moz-box-sizing:border-box; /* Firefox */ 
    box-sizing:border-box; 
} 

박스 크기는 당신이 높이에 영향을주지 않고 요소에 패딩과 테두리를 추가 할 수 있습니다. 기본적으로 박스 모델

http://jsfiddle.net/LbELK/24/을 변경

Answer 2

대신 부모에 패딩 탑을 사용하는 하위 요소에 여백 - 상단 사용할 수 있습니다 http://jsfiddle.net/LbELK/10/

.menu{ 
    background: green; 
    height: 100%; 
    overflow:hidden; 
} 

.menu p { 
    margin-top:10px; 
} 

Answer 3

이 시도를 :

: 그것은 도움이되기를 바랍니다

http://jsfiddle.net/neharikapadala/LbELK/13/

.menu{ 
    background: green; 
    height: 100%; 
    padding-top: 10%; 
} 

Answer 4

<p> 태그는 기본적으로 여백이 있으므로 여백과 여백을 제거하면됩니다. 또한 패딩 탑이 ... 당신을 위해 메뉴의

http://jsfiddle.net/kheema/LbELK/17/