이란 CSS는-가능한 모든 공간을 소모 div 만들기




position 뜻 (3)

모든,

브라우저에서 사용 가능한 화면 공간 만 차지하는 페이지가 있습니다.

나는 '상단 막대'와 '하단 막대'를 가지고 있는데, 둘 다 페이지 상단과 하단에 고정되어 있습니다. 위에서 언급 한 두 개의 막대 사이에 남은 공간을 소비하는 div를 갖고 싶습니다.

중간 div가 위쪽 및 아래쪽 막대로 겹치지 않는 것이 중요합니다. CSS로 가능합니까? 아니면 js를 사용해야합니까?

또한 js 코드를 사용하기 전에 브라우저가 CSS를 먼저로드한다고 생각하면 js를 사용하여 위의 코드가 어떻게 작동합니까?

많은 감사합니다,


이 데모 는 Chrome12에서는 작동하지만 YMMV 는 지원해야하는 브라우저에 따라 다릅니다. 예를 들어 position:fixed 는 IE6에서 올바르게 작동하지 않습니다.


relative 위치와 absolute 위치를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

CSS

   html,body,#wrapper {
        height:100%;
        margin:0;
        padding:0;
    }
    #wrapper {
        position:relative;
    }

    #top, #middle, #bottom {
        position:absolute;
    }

    #top {
        height:50px;
        width:100%;
        background:grey;
    }
    #middle {
        top:50px;
        bottom:50px;
        width:100%;
        background:black;
    }
    #bottom {
        bottom:0;
        height:50px;
        width:100%;
        background:grey;
    }

HTML

<div id="wrapper">
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</div>

데모 : http://jsfiddle.net/jz4rb/4


body 태그에 절대 위치 지정을 사용하십시오. position:absolute 이 0 인 position:absolute 값은 브라우저 윈도우와 동일한 크기가되도록 몸체를 "늘입니다". 또는 height: 100% 설정 height: 100% 또한 작동하지만 특정 오래된 브라우저에서는 이상하게 작동합니다.

그런 다음 머리글 및 바닥 글 막대를 피하기 위해 위쪽 / 아래쪽 오프셋이 충분한 중심 div에서 절대 위치 지정을 사용합니다. 헤더 바는 절대적으로 top 에 위치하고 fotter는 절대적으로 bottom 위치합니다.

참고 : 모바일 브라우저에서는 작동하지 않습니다. JS를 사용하여 창 높이를 가져 와서 중앙 div의 높이를 수동으로 설정해야합니다.





css-position