DIV를 사용한 연속 레이아웃

<div id="top"> 
*height: auto; 
min-height: 100%;* 

    <div id="content"> 
    *min-height: 500px;* 
    </div> 

    <div id="middle"> 
    *css ???* 
    </div> 
</div> 

<div id="footer">  
</div>

이 코드는 화면 크기가 정상인 경우에 효과적입니다. 하지만 전체 화면 모드에서는 바닥 글이 페이지 하단 (원하는 동작)으로 이동하지만 '중간'div는 바닥 글을 가져 오려면 높이를 늘려야합니다. 3 가지 요소 (내용, 중간 및 바닥 글)는 연속적이어야합니다.DIV를 사용한 연속 레이아웃

이 동작을 수행하려면 어떤 CSS 규칙을 사용해야합니까?

미리 감사드립니다.

업데이트.

몇 가지 CSS 규칙 및 작동을 사용했지만 IE8에서는 작동하지 않습니다 (IE9, Chrome, FF3 e FF4에서 작동). 관련 CSS는 다음과 같습니다

Top{ height: auto; } 
Content{ min-height: 100%; } 
Middle{ overflow: auto; padding-bottom: 130px; } 
Footer{ clear: both; height: 130px; margin-top: -130px; position: relative; }

출처

2011-04-27 CalypsOOO

바닥 글을 항상 화면 하단에 유지 하시겠습니까, 아니면 콘텐츠가 그것을 아래로 밀 때 스크롤해야합니까? –

@ 토마스 항상 아래쪽에 있지만 고정되어 있지 않습니다. – CalypsOOO

아, 알겠습니다. 미디어 쿼리에 대한 내 대답을 확인하십시오. 뷰포트 높이를 기준으로 너비와 높이 및 기타 CSS 특성을 설정할 수 있습니다. –

height:100%;는 모든이가 사용 가능한 공간을 차지하기 위해 필요한해야한다.

출처

2011-04-27 14:34:10

최대 또는 최소 높이로 CSS 미디어 쿼리를 시도해 볼 수 있습니다. 여기 예 : http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html 여기 문서 :

출처

2011-04-27 14:34:44

필수품으로 인해, 나는 CSS3를 피해야합니다 – CalypsOOO

그 냄새. 나는 사람들이 테이블을 싫어하지만, 기술적으로 그들은이 상황에서 일하는 것을 잘 알고 있습니다. 상, 중, 하의 세포. 이 경우 중간 셀은 항상 아래쪽을 만날 때까지 아래로 늘어납니다. –

나쁜 뉴스 http://www.w3.org/TR/css3-mediaqueries/ :는 솔직히 말해서, 동료, 나는이이 정확한 사양 가능하다고 생각하지 않습니다. 그것은 어떤 속도로든 아주 영리 CSS를 걸릴 것입니다. 그러나 테이블은 잘 작동합니다. 나는이 아이디어에 완전히 반대하지만,이 디자인 요구 사항이 필수라면, 아마도 당신은 길을 가야 할 것입니다.

좋은 뉴스

: 당신이 유체로 필요할 이유에 따라 , 우리는 아마도 원하는 효과를 줄 수 있습니다. 배경을 맞추기 만하면 될 수 있습니다. 게시물을 더 많은 정보로 업데이트하면 광산을 답변으로 업데이트 (잘하면) 할 수 있습니다.

출처

2011-04-27 15:19:28

안녕하세요 바닥 글에 붙이기 (고정되지 않음)해야하며, 내용 div의 높이가 가변적입니다. 내용 div가 너무 짧으면 중간 div는 div 사이의 공백을 피하기 위해 바닥 글을 터치해야합니다. 몇 가지 CSS 규칙과 작품을 사용했지만 Internet Explorer 8에서는 작동하지 않습니다 (IE9, Chrome, FF3 e FF4에서 작동). 위의 질문을 사용했던 CSS에서 확인하십시오. 감사합니다 :) – CalypsOOO

내가 알아야 할 것은 성장해야하는 이유입니다. 중간에 물건을 세로로 정렬하는 경우 자바 스크립트가 없으면 내가 아는 메서드는 작동하지 않습니다. 간격을 메우기 위해 배경을 늘려야하는 경우 내용이 수직 정렬을 변경하지 않는 한 그곳에서 도울 수 있습니다. 말이 돼? –

DIV를 사용한 연속 레이아웃

답변

관련 문제