div의 최소 높이를 설정하여 내용을 조정하는 방법

Question

다음 구조로 웹 페이지를 만들려고합니다 : 큰 div (주)와 그 안에 3 개의 div, 왼쪽 그림자, 내용, 그리고 오른쪽 그림자. 이것들은 그들을위한 CSS 코드입니다. mleft와 mright는 그림자입니다.

body,html{height:100%;} 
.main { 
width:900px; 
    height:100%; 
} 

.mleft, .mright { 
width:25px; 
height:100%; 
float:left; 
} 
.mleft { background-image: url("shadowleft.jpg"); } 
.mright { background-image: url("shadowright.jpg"); } 

.content { 
width:850px; 
float:left; 
    background-color:red; 
} 

그리고 HTML은 다음과 같이이다 :

<div class="main"> 
    <div class="mleft"></div> 
    <div class="mcontent"> 
    (content, some text and images) 
    </div> 
    <div class="mright"></div> 
</div> 

내가이 크고 작은 화면에서 볼 수 할 문제는 작은 화면에서 보는 작은 창을 만들 때, 주이다 div 높이가 콘텐츠 div의 높이보다 낮아 지므로 그림자가 너무 짧아서 콘텐츠 div가 표시되지 않습니다.
저는 min-height로 플레이했지만 min-height : auto는 작동하지 않고 "overflow"값 중 아무 것도 내가 원하는 것을하지 않습니다.
모든 브라우저에서 작동하는이 문제를 해결하는 확실한 방법은 무엇입니까? 자바 스크립트를 사용해야하나요? 다른 모든 방법으로 다시 실행 하시겠습니까?

업데이트 : 이것은

갱신 2의 모습의 이미지입니다 : 주요의 높이가 창 (100 %)의 직접 높이 것 같다 그래서 메인 항상 윈도우의 크기, 작은 내용이라면 내용보다 작기 때문에 성공하지 못한 채 최소 높이로 연주 해 보았습니다. 예상되는 결과는 콘텐츠의 크기에 도달 할 때까지 크기가 조정되고 중지되어야 할 때입니다.

Answer 1

OK, 나는 모든 오래된 물건을 삭제 한 ... 0에 배치됩니다 위치 :

http://jsfiddle.net/Damien_at_SF/AtX4A/

는 기본적으로, 그림자 콘텐츠 DIV 내부와 절대 위치에 앉아를 사용하여 해결책을 발견 0 왼쪽과 0,0 오른쪽 (또는 당신은 부정적인 위치를 사용하여 콘텐츠 외부로 이동할 수)

UPDATE :가 다시 주요 사업부를 넣고 훨씬 중심을하기 위해 그것의 스타일 margin:auto을 적용 :)

,451,515,

HTML

<div class="main"> 
    <div class="mcontent"> 
    <div class="mleft"></div> 
    <div class="mright"></div> 
    (content, some text and images)> 
    <div style="clear:both;"></div> 
    </div> 
</div> 

CSS

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

.main { 
    width:900px; 
    height:100%; 
    margin:auto; 
} 

.mleft, .mright { 
    width:25px; 
    height:100%; 
} 

.mleft { 
    background:green; 
    position:absolute; 
    top:0px; 
    left:0px; 
} 

.mright { 
    background:blue; 
    position:absolute; 
    top:0px; 
    right:0px; 
} 

.mcontent { 
    width:850px; 
    background-color:red; 
    position:relative; 
    padding-left:25px; 
} 

희망하는 데 도움이 :