플로팅 div 높이가 100 %가 아닌 이유는 무엇입니까?

-1

나는 100 %로 내 DIV의 높이를 확장하려는, 그러나 그것은 작동하지 않습니다 :플로팅 div 높이가 100 %가 아닌 이유는 무엇입니까?

enter image description here

지금까지, 내 코드는 다음과 같습니다

.add{ 
border:1px solid #ddd; 
display:block; 
float:right; 
margin:0 0 10px 10px; 
padding:10px; 
height:100%; 
}

그리고 HTML :

<div> 

<div class="add"> 
<div style="width:100px;height:400px;background:#ccc;"></div> 
</div> 

Lorem ipsum dolor sit amet... And a lot of text here 
Lorem ipsum dolor sit amet... And a lot of text here 
Lorem ipsum dolor sit amet... And a lot of text here 

</div>

출처

2011-12-13 ajax333221

html 구조도 제공 할 수 있습니까? – shinkou

@ shinkou, done. – ajax333221

바깥 쪽 div의 높이. 이런 식으로 뭔가가 작동합니다 :

<!doctype html> 
<html> 
<head> 
<style> 
.add 
{ 
    border:1px solid #ddd; 
    display:block; 
    float:right; 
    margin:0 0 10px 10px; 
    padding:10px; 
    height:100%; 
} 
</style> 
</head> 
<body> 
<div style="height: 768px;"> 

<div class="add"> 
<div style="width:100px;height:400px;background:#ccc;"></div> 
</div> 

Lorem ipsum dolor sit amet... And a lot of text here 
Lorem ipsum dolor sit amet... And a lot of text here 
Lorem ipsum dolor sit amet... And a lot of text here 

</div> 
</body> 
</html>

출처

2011-12-13 02:47:44 shinkou

높이를 지정하지 않고 추악한 테이블을 사용하지 않고 이것을 수행 할 수있는 방법이 있습니까? – ajax333221

바깥 쪽 div의 스타일을 'height : 100 %;'로 변경 한 다음 다른 규칙 인'html, body {height : 100 %;}'를 CSS에 추가 할 수 있습니다. 그러나 어느 쪽이든, 바깥 쪽 div의 높이를 지정해야합니다. – shinkou

을 CSS 2.1 Spec에서 :

비율

백분율의 높이를 지정합니다. 백분율은 생성 된 상자의 블록을 포함하는 의 높이를 기준으로 계산됩니다. 포함하는 블록의 높이가 명시 적으로 지정되지 않은 경우 (즉 콘텐츠 높이에 따라 다름) 이고이 요소가 절대 위치에 있지 않으면 값은 '자동'으로 계산됩니다.

따라서, 포함하는 블록에는 지정된 높이가 없으므로 flooded 요소의 높이는 auto입니다.

출처

2011-12-13 02:50:16 steveax

그래서 테이블을 사용해야합니까? – ajax333221

확실히 아닙니다. 그러나 제공된 두 답변이 귀하의 질문에 대한 답변입니다. 아마도 당신이 레이아웃으로 무엇을하려고하는지 정확히 설명한다면 누군가 다른 방법을 제안 할 수 있습니다. 단순히 칼럼이 전체 높이를 차지하는 것처럼 보이는 경우, 고전적인 [가짜 컬럼 기술] (http://www.alistapart.com/articles/fauxcolumns/)이 한 가지 방법입니다. – steveax

그래서 당신은 "왜 ...하지 않습니까?"를 "어떻게 할 수 있습니까?"라고 제안하면 2 개의 대답이 내 질문에 대답하지 못합니다. 당신이 "당신 머리를 자르셨습니까?"라고 묻는다면 당신은 어떤 사람입니까? 당신은 답장합니다 : "아니오, 다른 사람이 나를 위해 자르십시오" – ajax333221

플로팅 div 높이가 100 %가 아닌 이유는 무엇입니까?

답변

관련 문제