두 번째 숫자가 calc()에서 무시됩니다.

Question

헤더, 메뉴, 래퍼 및 바닥 글이있는 웹 페이지가 있습니다. 래퍼에서 모든 구성 요소의 높이를 설정하고 calc를 사용하여 래퍼의 최소 높이를 결정하여 바닥 글을 끈적 거리게 만들려고합니다. 브라우저는 inspect 요소에서 calc 함수를 선택하지만 래퍼의 높이를 확인하면 항상 100 % - 545px가 아니며 이유를 알 수 없습니다. 나는 파이어 폭스와 크롬과 다른 크기의 모니터로 테스트했지만 기쁨은 없다. 내가 뭘 잘못하고 있니? 당신이 제공 할 수있는 모든 도움에 미리

#wrapper-fullwidth{ 
/* Firefox */ 
min-height: -moz-calc(100% - 545px); 
/* WebKit */ 
min-height: -webkit-calc(100% - 545px); 
/* Opera */ 
min-height: -o-calc(100% - 545px); 
/* Standard */ 
min-height: calc(100% - 545px); 
} 

jsfiddle

많은 감사합니다.

Answer 1

을 당신이 뭔가를 시도 할 필요가 있다고 생각합니다.

이 당신의 HTML (또는 유사) 인 경우 : CSS 모양을 필요

<div class="header">Header</div> 
<div class="main">Main</div> 
<div class="footer">Footer</div> 

:

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
} 
.main { 
    min-height: -moz-calc(100% - 90px); 
    min-height: -webkit-calc(100% - 90px); 
    min-height: -o-calc(100% - 90px); 
    min-height: calc(100% - 90px); 
    background-color: lightgray; 
} 
.header, .footer { 
    height: 45px; 
    background-color: yellow; 
} 

당신은 다른 html 및 body 또는 백분율 높이 높이를 설정해야 in .main이 정의되지 않았습니다. 에

데모 : 기본 '수'존재하지 않는, 그래서 내 생각 엔이 100 %에 해당 픽셀에 해당이 http://jsfiddle.net/audetwebdesign/2e3dK/

Answer 2

내 생각 엔 px가 결국 문자열이 아니라 int가된다는 것입니다.

이 시도 :

min-height: -moz-calc(100% - 545); 

업데이트 : 대부분의 가능성이 늘 일 때문에 높이를 사용하려고하지 최소 높이

height: -moz-calc(100% - 545px);