Div에 높이가 없음

wrapper div에 높이가없는 이유는 무엇입니까? 높이 (height:200px)를 설정하면 녹색 배경이 나타나지만 자동 높이로 설정하는 방법은 무엇입니까? 여기 Div에 높이가 없음

내 코드 ( JSFiddle)입니다 :

HTML :

<div class="wrapper"> 
    <div class="effect"></div> 
    <div class="content"> 
     ...content 
    </div> 
</div>

CSS : 그것은 작동하지 않습니다

.content { 
    position: absolute; 
    background-color:red; 
} 

.wrapper, .effect { 
    background: green;   
} 

.wrapper { 
    position: relative; 
    width: 630px; 
} 

.effect { 
    width:100%; 
    position: absolute; 
}

출처

2014-06-12 szu

높이 : 자동; ..... –

http://jsfiddle.net/q3xT4/2/ 나는 그것을 시험해 보았지만 나에게 효과가 없다. – szu

요소를 위치 시키면 정상적인 문서 흐름에서 절대적으로 제거된다. 그러므로'.content'도'.effect'도'.wrapper'를 확장하지 않습니다. – showdev

(즉, 부모 요소는 어떤 높이를 가지고 있지) 모든 때문에 .wrapper 요소의 직계 하위 요소는 절대적으로 배치됩니다.이 요소는 문서의 흐름에서 벗어나게되므로 효과적입니다. 집안의 차원은 무너져 버립니다.

는 또한 알, 부모 래퍼의 effect is the same when you float all descendants 그 float는 문서 흐름 중 정상 요소를 복용의 효과가 있기 때문이다. (example fiddle 참조) 명시 적으로 부모의 높이를 명시

다음 중 하나를

부모 .wrapper 요소에 대해 일정한 높이를 선언 관련된 두 가지 모두가 발생하지 않도록하기 위해 두 가지 방법이 있습니다

또는 자체 콘텐츠에 종속되지 않는 상대 높이 (예 : percentages 또는 viewport units)를 사용하십시오.

디자인 전략과 달성하려는 목표를 재고해야합니다. 당신이하고자하는 것을 성취 할 수있는 다른 방법이 있습니다. 우리에게 보여줄 수 있습니까?

출처

2014-06-12 21:43:32 Terry

+1 정답입니다. 아주 잘 설명! –

@SatwikNadkarny +1 주셔서 감사합니다, 친구! – Terry

고마워요! 그것은 작동합니다! – szu

Div에 높이가 없음

답변

관련 문제