div의 높이를 브라우저의 높이로 설정하십시오.

Foo Fighter가 웹 사이트에서 진행하고있는 내용과 비슷한 내용의 슬라이드 div 목록을 만들려고합니다. http://www.foofighters.com/us/discography div의 높이를 브라우저의 높이로 설정하십시오.

알아 두어야 할 가장 중요한 점은 브라우저 크기를 조정할 때 각 "슬라이드"를 적절한 높이로 자동 조정하는 방법입니다. 내가 링크 된 디스토 그래피 페이지에서 직접 확인할 수 있습니다. 이것을 달성 할 수있는 방법이 있습니까? 나는 그것이 자바 스크립트/jquery 일 것이라고 가정합니다.

출처

2012-09-06 JackArrgon

그것은 그 블록 요소를 100 % 높이를 알고하는 것이 중요합니다, 부모의 모든 또한 100 % 높이로 설정해야합니다.

이

<!DOCTYPE html> 
<html> 
<body> 

<div id="wrapper"> 
    <div id="myDiv">This is my div!</div> 
</div>  

</body> 
</html>

myDiv 100 % 높이를 만드는 데 필요한 CSS는 #myDiv의 모든 부모는 설정

<style type="text/css"> 
    html, body, #wrapper, #myDiv { height: 100%; } 
</style>

공지 될 것이다 : 예를 들어

, 내 HTML은 다음과 같습니다 경우 ~ 100 % 높이. 이것은 블록 요소의 100 % 동적 높이를 달성하는 열쇠입니다.

출처

2012-09-06 21:02:30 Axel

고마워요! 이것은 효과가 있었다. – JackArrgon

브라우저 창 높이로 크기를 조정하는 div를 가져 오는 예 :

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html, body { 
    height: 100%; 
    background-color: black; 
    margin: 0; 
    padding: 0; 
} 
#mydiv { 
    height: 100%; 
    width: 400px; 
    background-color: white; 
    margin: auto; 
    text-align: center; 
} 
</style> 
</head> 
<body> 

<div id="mydiv">TEST</div> 

</body> 
</html>

가 크롬, IE9, 파이어 폭스와 오페라, 모든 윈도우에서 실행에 테스트. IE9에서는 DOCTYPE을 올바르게 작동 시키려면 DOCTYPE을 지정해야했지만 다른 브라우저는 상관하지 않았습니다.

JQuery와 대안 : Set DIV height dynamically based on viewport height

출처

2012-09-06 19:45:28

IE에서 머리를 주셔서 감사합니다! IE에서 작동하려면 여전히 을 사용할 수 있습니까? 아니면 W3Schools가 나열하는 항목 중 하나를 사용해야합니까? 1.0 strict와 비슷합니다. – JackArrgon

div의 높이를 브라우저의 높이로 설정하십시오.

답변

관련 문제