CSS div 높이를 100 % 빼고 nPx를 설정하는 방법

199

2 개의 div를 서로 옆에 묶는 래퍼 div가 있습니다. 이 컨테이너 위에 헤더를 포함하는 div가 있습니다. 래퍼 div는 100 %에서 헤더 높이를 뺀 값이어야합니다. 헤더는 약 60 픽셀입니다. 이것은 고정되어 있습니다. 그래서 내 질문은 : 래퍼 div의 높이를 100 %에서 60px로 어떻게 설정합니까?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

css height

— 마틴
소스

16

w3c가 너비에 일정한 값을 뺀 상수 속성을 추가하는 것을 고려하고 너비에 테두리를 포함하는 것을 잊었지만이 두 가지를 사용할 수 있으면 대부분의 CSS 해킹이 사라질 것이라는 정의를 변경해야합니다.

— samarjit samanta

79

다음은 Firefox / IE7 / Safari / Chrome / Opera에서 테스트 된 작동중인 CSS입니다.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"overflow-y"는 w3c 승인을받지 않았지만 모든 주요 브라우저가이를 지원합니다. #div와 #right의 두 div는 내용이 너무 높으면 세로 스크롤 막대를 표시합니다.

이것이 IE7에서 작동하려면 DOCTYPE을 추가하여 표준 호환 모드를 트리거해야합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	*{margin:0px;padding:0px;overflow:hidden}
	div{position:absolute}
	div#header{top:0px;left:0px;right:0px;height:60px}
	div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
	div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
	div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>

스 니펫 확장

— 알시 엔드
소스

그것은 FF에서 작동하지만 IE7에서는 작동하지 않습니다. '헤더'코드 만 표시됩니다. <div id = "header"> 헤더 </ div> <div id = "wrapper"> <div id = "left"> 왼쪽 </ div> <div id = "right"> 오른쪽 </ div> </ div>

— Martijn

표준 호환 모드를 트리거 했습니까? 응답에 예제 페이지를 추가하겠습니다.

— Alsciende

1

또한이 div를 페이지 중간이나 다른 곳에 배치 해야하는 경우 컨테이너 div에 포장하고 컨테이너에 설정하십시오 position: relative. 그런 다음 페이지의 원하는 위치에 컨테이너를 놓습니다.

— Mr.

예를 들어 각각의 높이가 40 %와 60 % 인 2 개의 div를 원한다면 inner div, #left 내부는 어떻습니까?

— TecHunter

px가 0 개의 값 매개 변수에 지정된 이유에 대한 구체적인 이유가 있습니까?

— Cassandra

274

CSS3에서는 다음을 사용할 수 있습니다

height: calc(100% - 60px);

— libjup
소스

25

"-"기호 앞뒤에 공백이 있는지 확인하십시오. Firefox는 "-"기호 앞에 공백이 있어야합니다.

— Codler

7

완전한. 나는 CSS3가 이것을 할 수 있다는 것을 몰랐다.

— Tom Beech

와! 정확히 내가 원하는 것. 감사.

— Sandhu

1

이것은 환상적입니다

— Mirko

47

IE6를 지원해야하는 경우, JavaScript를 사용하여 랩퍼 div의 크기를 관리하십시오 (창 크기를 읽은 후 요소의 위치를 픽셀 단위로 설정). JavaScript를 사용하지 않으려면이 작업을 수행 할 수 없습니다. 해결 방법이 있지만 모든 경우와 모든 브라우저에서 작동하는 데 1-2 주가 소요될 것으로 예상됩니다.

다른 최신 브라우저의 경우 다음 CSS를 사용하십시오.

position: absolute;
top: 60px;
bottom: 0px;

— 아론 디 굴가
소스

이 사이트는 IE 7 과만 호환됩니다. 높이를 사용할 때 : 100 % 및 상단 : 60px; 여전히 스크롤바가 있습니다. 60px 아래로 스크롤 할 수 있습니다.

— Martijn

4

높이를 지정하지 말고 위와 아래를 사용하여 브라우저가 높이를 계산하도록하십시오.

— Aaron Digulla

그러나 페이지의 최대 높이가 100 %에서 60px를 뺀 것을 원합니다. 내용이 그보다 큰 경우 overflow : scroll;을 사용하여 div의 스크롤 막대를 원합니다.

— Martijn

4

스크롤 막대의 경우 래퍼 안에 div를 추가하여 완전히 채우고 오버플로를 만듭니다. scroll;

— Aaron Digulla

IE7의 버그로 인해 여전히 실패 할 수 있습니다. 작동하지 않으면 JavaScript를 사용하십시오. 나는 당신이 그것을 좋아하지 않지만 이상한 버그로 어려움을 겪고있는 일주일의 작업에 대해 가중치를 부여합니다.

— Aaron Digulla

6

위대한 하나 ... 지금 그는 % 그가 사용을 중지했습니다 ... 아래에 표시된 메인 컨테이너를 제외하고 :

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

그리고 여기 CSS가 있습니다 :

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

모든 알려진 브라우저에서 이것을 테스트했으며 정상적으로 작동합니다. 이 방법을 사용하는 데 단점이 있습니까?

— 자야 베어
소스

4

높이 와 같은 것을 할 수 있습니다 . calc (100 %-nPx); 예를 들어 높이 : calc (100 %-70px);

— DrB
소스

2

div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

적게 사용하는 동안 확인하십시오

height: ~calc(100% - 60px);

그렇지 않으면 덜 올바르게 컴파일하지 않을 것입니다.

— 다디 치 수 라프
소스

0

이것은 제기 된 질문에 정확하게 대답하지는 않지만 달성하려는 것과 동일한 시각 효과를 생성합니다.

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>

— 노엘 월터스
소스

0

이 예에서는 다른 영역을 식별 할 수 있습니다.

<html>
<style>
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color:blue;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    bottom: 0px;
    background-color:red;
}
#divContentCenter {
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right:200px;
    background-color:yellow;
}
#divContentRight {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:200px;
    background-color:red;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:blue;
}
</style>
<body >

<div id="divContainer">
    <div id="divHeader"> top
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">left
        </div>
        <div id="divContentCenter">center
        </div>
        <div id="divContentRight">right
        </div>
    </div>
    <div id="divFooter">bottom
    </div>
</div>

</body>
</html>

— 렌조 시트
소스

0

나는 아직이 게시물을 보지 못했지만 거기에 넣을 것이라고 생각했습니다.

<div class="main">
<header>Header</header>
<div class="content">Content</div>

그런 다음 CSS :

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.main {
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

header {
    height: 50px;
    margin-top: -50px;
    width: 100%;
    background-color: #5078a5;
}

.content {
    height: 100%;
    background-color: #999999;
}

작동하는 jsfiddle 은 다음과 같습니다.

참고 : 브라우저 호환성이 무엇인지 전혀 모른다. 나는 대체 솔루션으로 놀고 있었고 이것이 잘 작동하는 것처럼 보였다.

— 프리덤 맨
소스

-1

외부 래퍼 div를 100 %로 설정하면 내부 래퍼 div 100 %가 그에 상대적이어야합니다.

나는 이것이 나를 위해 일하는 데 확실히 사용되었다고 생각했지만 분명히 그렇지는 않았다.

<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper"  style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
  <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text 

on the left</div>
  <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the 

right</div>
</div>
</div>
</body>
</html>

— 케이드 루
소스

그 예를들 수 있습니다. 이해가 안됩니다

— Martijn

내가 생각한 것을 게시했지만 이번 초 / 늦게는 작동하지 않습니다. 좀 더 자면 어쩌면

— Cade Roux

-1

절대 위치 지정과 모든 재즈를 사용하지 않으려는 경우 사용하고 싶은 수정 사항이 있습니다.

귀하의 HTML :

<body>    
   <div id="header"></div>
   <div id="wrapper"></div>
</body>

당신의 CSS :

body {
     height:100%;
     padding-top:60px;
}
#header {
     margin-top:60px;
     height:60px;
}
#wrapper {
     height:100%;
}

— 스코틀랜드 사람
소스

1

나는 이것이 예상대로 작동하지 않는다고 생각합니다. 먼저 #header이어야합니다 margin-top:-60px;. 둘째, height:100%높이는 여백, 패딩 및 테두리를 포함하지 않고 부모 요소 높이의 100 %가됩니다. 스크롤 설정에 따라 스크롤 막대가 나타나거나 내용이 잘립니다.

— Kylos