신장이 예상대로 렌더링하지 않습니다

그래서 자바 스크립트에서 나는 100 % 내 웹 사이트의 섹션을 만들려고 노력하고 있어요 - "탐색"신장이 예상대로 렌더링하지 않습니다

당신이 볼 수 객체 만, 처음처럼 생각할 수

정말 크고, 두 번째는 바닥에 작습니다.

CSS 같이 선언 :

#mainHeader{ 
    height: 100vh; 
} 

#nav{ 
    height 90px; 
}

내가 자바 스크립트/JQuery와이를 만든

이 보이는 무엇

<body onload = "function()"> </body> 

var mainHeaderHeight = $("#mainHeader").outerHeight(true) - $("nav").outerHeight(true); 
$("#mainHeader").css("height",mainHeaderHeight + "px");

에 실행 같은 : Extra Webpage content peeks higher What I want it to look like

출처

2014-12-31 skarchmit

당신이 직면하고있는 문제는 무엇 ? –

너는 구할 수있어. 자신 JQuery와 문제 및 (어쨌든 vh 꽤 "현대"를 사용하고 있기 때문에)을 CSS3 옵션 calc을 사용

#mainHeader { 
    height: calc(100vh - 90px); 
}

출처

2014-12-31 00:13:49

이것은 90px를 더 작거나 더 크게 변경하기로 결정한 경우 나중에 자동으로 변경하려는 경우를 제외하고는 효과가 있습니다. 자동 항상 좋습니다 : D – skarchmit

당신 대신 당신의 id 일치하는 데 필요한 #nav의 nav 요소를 선택하고 당신의 CSS.

var mainHeaderHeight = $("#mainHeader").outerHeight(true) - $("#nav").outerHeight(true); 
 
$("#mainHeader").css("height",mainHeaderHeight + "px");

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#mainHeader{ 
 
    height: 100vh; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#nav{ 
 
    height 90px; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="mainHeader">main</div> 
 
<div id="nav">nav</div>

출처

2014-12-31 00:17:44

예, 정확히 그 의미가 있다고 생각 : D * {padding : 0; margin : 0} – skarchmit

신장이 예상대로 렌더링하지 않습니다

답변

관련 문제