높이 설정 100 % 작동하지 않음

컨테이너의 경계가 100 % 높이에도 불구하고 맨 아래로 이동하지 않습니다. 여기 내 코드가 있는데, 컨테이너는 다른 div 중심에 있습니다.높이 설정 100 % 작동하지 않음

HTML을

<div id="center"> 
<div class="container" > 
</div> 
</div>

CSS를 높이 뭔가 내부에 있어야 사업부

#center { 
    float:left; 
    width:20%; 
    margin-top:10px; 
    height:100%; 
} 

.container { 
    margin-top:3px; 
    height:100%; 
    border:2px solid #dedede; 
    width:600px; 
}

출처

2011-07-29 katie

무엇의 바닥? – random

100 % * * *? –

@random 브라우저 창 하단 @ – katie

당신은 높이 약

body, html{ 
    height: 98%; 
    padding: 0; 
}

플레이에 포함 된 요소의 여백 및 테두리에 의한 수직 스크롤 막대를 제거하기 위해 ... 당신의 CSS에서이 같은 것을 포함해야합니다.

http://jsfiddle.net/4JgA4/1/

편집 :는

는 그렇지 않은 경우 100 %하고, 수직 스크롤 바를 제거하는 내부 주요 요소의 높이를 감소시킨다.

body, html { 
height: 100%; 
padding: 0; 
} 

#center { 
float:left; 
width:20%; 
margin-top:10px; 
height:90%; 
} 

.container { 
    margin-top:3px; 
    height:100%; 
    border:2px solid #dedede; 
    width:600px; 
}

http://jsfiddle.net/4JgA4/3/

출처

2011-07-29 22:00:23 Sparky

백분율로 연주하는 대신 테두리 상자에 상자 크기를 설정할 수도 있습니다 :'box-sizing : border-box; '이것은 내가 새 프로젝트를 시작할 때 내가 제일 먼저하는 일입니다. –

귀하의 ID = '센터'.

이렇게하면 스타일을 너비 또는 높이 = 100 %로 설정할 때마다 "100 % WHAT?"이라고 나 자신에게 묻습니다. 요소가 무엇이든간에 너비와 높이에 맞게 적절하게 스타일이 지정되었는지 확인하라는 메시지가 표시됩니다.

또한 주변에 다른 색상의 경계선을 넣어 실제 위치와 크기를 확인하십시오. 치수를 망칠 수는 있지만 실제 진행 상황에 대한 좋은 아이디어를 제공합니다.

출처

2011-07-29 21:15:43 n8wrl

빠른 디버깅을 위해'border' 대신'outline'을 사용할 수 있습니다. (논쟁의 여지는 있지만 Firebug는 제거 할 잔류 물이 적습니다. 윤곽선의 장점은 흐름에 영향을 미치지 않아야한다는 것입니다. –

@ n8wrl 당신은 중심 div가 픽셀 단위로 설정하는 것과 같은 절대 높이를 가져야한다는 것을 의미합니까? – katie

작동하는 100 % 높이 속성의 경우 상위 div의 높이를 설정해야합니다.

#center의 상위 요소는 CSS가 예상대로 작동 할 수있는 높이가 있어야합니다.

출처

2011-07-29 21:19:42 Sinan

일반적으로 div는 지정한 높이와 관계없이 콘텐츠의 높이만큼입니다. 그들을 중첩시켜야합니다. 복잡성을 피하기 위해 최대 높이를 설정하고 컨테이너의 맨 아래에있는 요소에 절대 위치 지정을 사용합니다.

디자인 접근법으로 div의 내용이 원하는 높이인지 확인해야합니다. 패딩은 매우 유용한 도구가 될 수 있습니다. 우스 꽝스러운 패딩을 넣고 오버플로를 숨길 수 있습니다. 그렇다면 최대 높이에서 모자를 씌울 것입니다.

출처

2011-07-29 21:21:53

높이 설정 100 % 작동하지 않음

답변

관련 문제