DIV가 지정된 비율의 높이를 갖도록 강제하는 방법은 무엇입니까?

나는이 HTML을 가지고있다 : (헤더가 화면 높이의 15 %가되도록) .header div까지의 전체 DOM 트리가 높이 비율로 정의된다. 그러나 헤더 div 높이는 화면의 15 % 미만인 내용 만 감쌀뿐입니다.DIV가 지정된 비율의 높이를 갖도록 강제하는 방법은 무엇입니까?

<!DOCTYPE HTML> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/index.css">   
    <title> </title> 

    </head> 
    <body onload="pageLoad();"> 
    <div class="header"> 
    </div> 

    <div id="TempDiv" style="visibility:hidden"></div> 
    <div class="page-body"> </div> 
    <div class="footer"> </div> 
    <script> $(".footer").load("footer.html");</script> 
    </body> 
</html>

CSS의는 다음과 같습니다

html { 
    -webkit-touch-callout: none; 
    -webkit-text-size-adjust: none; 
    -webkit-user-select: none; 
    background-color:black; 
    background-image:url('../res/bg.png'); 
    background-size:100% 100%; 
    background-repeat:no-repeat; 
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
    font-size:12px; 
    width:100%; 
    height:100%; 
} 

.body { 
    width:100%; 
    height:100%; 
} 

.header { 
    /*position: absolute; - this change the height as desired but other DIVs get up to undesired position */ 
    margin-top:3%; 
    height:15%; 
} 

.page-body { 
    margin-top:3%; 
    /*min-height:40%;*/ 
    /*border: solid thick white;*/ 
} 

.about , .gallery, .events , .contact 
{ 
    height:100%; 
    width:100%; 
    /*border: solid thick green;*/ 
    vertical-align:middle; 
} 

.footer { 
    /*border: solid thick white;*/ 
    width:100%; 
    height:auto; 
    position: fixed; 
    bottom:4%; 
    text-align:center; 
    }

출처

2013-08-19 Bush

어딘가에 라이브 버전의 페이지가 있습니까? 그 코드는 잘 작동하기 때문에. – Shomz

아니요 .. 당신의 컴퓨터에서 테스트 해 보셨습니까? – Bush

jsfiddle에서 테스트 한 결과, html과 body 요소의 높이가 100 : % 인 것처럼 잘 작동하는 한 제대로 작동합니다. – Shomz

문제는 당신 몸의 CSS를 맞춤법이 틀린 것입니다. 이제는 존재하지 않는 본문 클래스에 대해 CSS를 설정하고 있습니다. ! 내가 100 %에 HTML을 넣어 넣어 중요한 헤더에 대한 때

/* Below was the problem */ 
body { 
    width:100%; 
    height:100%; 
}

출처

2013-08-19 21:05:51 Sumurai8

내 코드가 작동;

html 
{ 
    width:100%; 
    height:100%; 
} 

body 
{ 
    width:100%; 
    height:100%; 
} 

.header 
{ 
    15% !important; 
}

출처

2016-09-28 08:12:04 bdalina

DIV가 지정된 비율의 높이를 갖도록 강제하는 방법은 무엇입니까?

답변

관련 문제