2014-04-12 1 views
-1

지난 2 일 내 머리를 아프게했습니다. 기본적으로, 첫 번째 블록은 화면의 너비와 높이를 사용하고 두 번째 블록은 상대적이어야하는 한 페이지 레이아웃을 만듭니다.Div 촬영 화면 너비 및 높이

예 : http://www.shegy.nazwa.pl/themeforest/exit/normal/

<body> 

<div id = "block1"> 
This is block 1 taking 100% width and height of screen. 
</div> 

<div id="block2"> 
Block 2 is relative to block 1 
</div> 

</body> 
+0

무엇'폭 사용에 대한 : 100vw을; 높이 : 100vh'? – Terry

답변

1

비결은 신체/HTML로 height: 100%;margin: 0;를 추가하는 것입니다. 그럼 불가사의하게 작동합니다 :).

HTML :

<div id="box1">HELLO HELLO THIS IS RED BOX, ARE YOU HEARING ME BLUE?</div> 
<div id="box2">YES, RED, I'VE GOT YOU LOUD AND CLEAR. OVER. <div> 

CSS :

html, body { 
    height: 100%; 
    margin: 0; 
} 
#box1 { 
    min-height: 100%; 
    min-width: 100%; 
    color: white; 
    background-color: red; 
} 

#box2 { 
    min-height: 100%; 
    min-width: 100%; 
    color: white; 
    background-color: blue; 
} 

뿐인 :

http://jsfiddle.net/ewzLM/1/

+0

아니요, 이것은 완벽한 예제가 될 것입니다 : http://www.shegy.nazwa.pl/themeforest/exit/normal/ – sidegeeks

+0

@Riqwan 그럼 다음 페이지도 100 % 100 %입니까? – Shahar

+0

너비 만 100 %입니다. 그것 자체 페이지가 아니지만 그래. – sidegeeks