CSS - 자동으로 컨테이너 높이를 설정 하시겠습니까?

Question

가끔씩 나는이 문제로 자신을 발견하고 그것을 해결할 수 없었습니다!

용기의 높이를 자동으로 설정할 수있는 방법이 있습니까? http://jsfiddle.net/2x78tcbn/

height: auto;이 시나리오에서 작동하지 않습니다

는 여기에 예제의 바이올린입니다.

내가 말했듯이 너비는 동일하게 유지되지만 높이가 자주 변경되기 때문에 컨테이너 높이 이외에 페이지가 예상대로로드됩니다.

문제는 컨테이너 아래에 콘텐츠가 추가 될 때마다 올라가서 예상대로 렌더링되지 않습니다.

여기에서 볼 수있다 : 그것은 꽤 많은 시간 동안 나를 이해할 수없는 됐어요으로http://jsfiddle.net/2x78tcbn/1/

이 사람이 아마도 이것에 대한 해결책이 있습니까!

정말 고마워요.

감사합니다.

Answer 1

플로트를 지울 필요가 있기 때문입니다. 정의에 따르면, 떠 다니는 요소는 문서 흐름에서 가져 오므로 포함하는 부모의 높이가 축소됩니다. 간단한 트릭을 사용하는 것입니다 overflow: hidden :

#container { 
    width: 600px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

여기

참조 바이올린 : http://jsfiddle.net/teddyrised/2x78tcbn/2/

그러나, 경우에 넘치는 내용을 숨기는 것은 원하는 행동, 다른 clearfix 솔루션에서 볼 수도 있지 않은지 : http://nicolasgallagher.com/micro-clearfix-hack/

더 나은 : 크로스 브라우저 호환성 아닌 경우 주요 우선 순위, 최신 CSS3의 인 flexbox 사양 : http://jsfiddle.net/teddyrised/2x78tcbn/3/

를 사용하여 고려할 수 있습니다 16,

Answer 2

JQuery와 창문의 크기와 높이 런타임을 설정하는 데 도움 테리에 대한

$('#mainBanner').height($(window).height()-100); 
alert($(window).height());