몸을 아래로 내리고 높이를 변경하는 방법은 무엇입니까?

일부 패딩으로 본문 태그를 오프셋하려고합니다. 그러나 브라우저 창 아래로 떨어지거나 스크롤바를 유도하지 않도록 몸체를 조정하고 싶습니다. http://jsfiddle.net/jM9Np/1/에게몸을 아래로 내리고 높이를 변경하는 방법은 무엇입니까?

는 HTML :이

<body> </body>

CSS :

html, body { 
height: 100%; 
} 

body { 
margin-top: 20em; 
background-color: LemonChiffon; 
}

이상적으로 내가하고 싶은 여기

내가 달성하기 위해 노력하고있어의 예입니다 몸 높이에서 20em을 뺍니다. 어쨌든 Javascript없이 모든 브라우저 (Internet Explorer 제외)에서 지원하는 방식으로이 작업을 수행 할 수 있습니까? 감사.

출처

2012-09-13 user1669908

같은 것을 할 것입니다.

html, body { 
    height: 100% 
} 

div { 
    position: absolute; 
    top: 20em; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: LemonChiffon; 
}

http://jsfiddle.net/za4e3/

: 몸과 위치를 절대 내에서 다른 DIV를 추가하는 것입니다

html { 
    height: 100% 
} 

body { 
    border-top: 20em solid #fff; 
    background-color: LemonChiffon; 
}

http://jsfiddle.net/jM9Np/10/

그러나 가장 좋은 방법 이럴 : 당신은 테두리, f.ex을 사용할 수 있습니다

출처

2012-09-13 22:05:39 David

고맙습니다. 두 번째 코드 블록을 사용하여 결국 가장 이상적이었습니다. – user1669908

주요 브라우저의 최신 버전을 타겟팅하는 경우 운이 좋았습니다. 이것은 (full support table 참조) IE9에서도 작동합니다 :

html { 
height: 100%; 
} 

body { 
margin-top: 20em; 
height: calc(100% - 20em); 
background-color: LemonChiffon; 
}

http://jsfiddle.net/jM9Np/3/

출처

2012-09-13 21:51:04 bfavaretto

유효하지 않은 속성 값 ... –

+와 - 연산자는 항상 공백으로 둘러싸 야합니다 –

와우, 이것은 매우 유용합니다. 불행히도 여전히 꽤 실험적 인 것 같습니다 (Opera는 아직 지원하지 않습니다.). 팁 고마워! – user1669908

나는 상황에 따라 다르다

html{ 
height: 100%; 
background-color:black; 
} 
body { 
height:80%; 
margin-top: 20%; 
background-color: LemonChiffon; 
}

출처

2012-09-13 21:56:17 andres83

백분율 일 수 없습니다. 정확한 측정이 필요합니다. – user1669908

몸을 아래로 내리고 높이를 변경하는 방법은 무엇입니까?

답변

관련 문제