css - 이란 - position 뜻




CSS는-가능한 모든 공간을 소모 div 만들기 (2)

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

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

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

모든,

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

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

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

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

많은 감사합니다,


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





css-position