패딩 / 여백이있는 CSS 100 % 높이

813

HTML / CSS를 사용하면 너비 및 / 또는 높이가 부모 요소의 100 %이고 여전히 적절한 패딩 또는 여백이있는 요소를 만들 수 있습니까?

"적절한"에 의해 나는 나의 부모 요소 인 경우, 의미 200px높이 나는 지정 height = 100%에 padding = 5px내가이 얻을 것을 기대하는 190px높은 요소를 border = 5px모든면에서 멋지게 부모 요소를 중심으로.

이제 표준 상자 모델이 작동하도록 지정하는 방식이 아니라는 것을 알고 있습니다 (왜 그런지 정확히 알고 싶지만). 그래서 명확한 대답이 작동하지 않습니다.

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

그러나 임의의 크기의 부모에 대해이 효과를 안정적으로 생성하는 몇 가지 방법이 있어야한다고 생각합니다. 누구나이 (겉보기에는 간단한) 작업을 수행하는 방법을 알고 있습니까?

아, 그리고 기록을 위해 IE 호환성에 크게 관심이 없기 때문에 (아마도) 일을 조금 더 쉽게해야합니다.

편집 : 예를 요청한 이후 내가 생각할 수있는 가장 간단한 예가 있습니다.

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

그러면 스크롤바를 요구할만큼 페이지가 커지지 않고 모든 가장자리에 25 픽셀의 패딩이 표시되도록 블랙 박스를 표시해야합니다.

css 
— 토지
소스
이 두 가지 솔루션이 가장 안정적인 것으로 나타났습니다. http://www.xs4all.nl/~peterned/examples/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/ 특정 HTML이 있습니까? 우리는 볼 수 있고 놀 수 있습니까?
— Nick Presta 2016 년
— Ben

답변:

755

" PRO HTML 및 CSS 디자인 패턴 "을 읽고 이러한 종류의 작업을 수행하는 방법을 배웠습니다 . 은의 display:block기본 표시 값 div이지만 명시 적으로 만들고 싶습니다. 컨테이너는 올바른 유형이어야합니다. position속성은 fixed, relative또는 absolute입니다.

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}
<div class="stretchedToMargin">
  Hello, world
</div>
스 니펫 확장

Nooshu의 의견에 의한 바이올린

— 프랭크 슈 비터 만
소스
42
훌륭한 솔루션,이 하나를 즐겨 찾기에 추가합니다. 라이브 데모를 원하는 사람을 위해 jsfiddle.net/Rpdr9 에 신속하게 추가했습니다 . 당신이 상관하지 않기를 바랍니다.
— Nooshu
16
@Toji는 IE 호환성에 관심이 없었지만 불행히도해야합니다. 이 솔루션은 처음에는 IE6에서 작동하지 않았습니다. Dean Edwards의 IE9.js 를 페이지에 추가하면 이 작업을 수행 할 수 있습니다. 이제 나는 상대 / 절대적 위치가 자식 요소에 무언가
— Christopher Parker
24
-1 (단지 소수 인 것처럼 보이지만 : P). 이것은 상자를 절대 위치에 놓을 수 있다고 가정합니다. 사람들은 이미 pos : abs를 남용하므로이 탄약이 필요하지 않습니다. 이 예제를 보자. 내부에 "panel"클래스의 여러 div가있는 div "panels". "패널"은 {overflow : hidden; height : 300px;} 및 "panel"의 내용 / 콘텐츠 높이는 {border : # 000 solid 1px; 왼쪽으로 뜨다; 마진 오른쪽 : 10px;}. 어느 시점에서든 경계를 잃지 않고 모든 "패널"을 "패널"높이로 만듭니다. "panel"div는 pos : abs'd 일 수 없습니다. 그러나 @Marco의 솔루션은이 시나리오에서 작동합니다.
— eternicode
8
와우, 알겠다 top:0, bottom:0요소 밖으로, 기본적으로 "스트레칭". position:absolute그래도 작동하도록 할 수 있습니다
— Matt
7
top:20px;bottom:20px;left:20px;right:20px;여백을 전혀 사용 하는 대신 할 수 없었 습니까?
— chowey
391

CSS3 에는 상자 모델이 너비 / 높이를 계산하는 방식을 변경하는 데 사용할 수 있는 새로운 속성 이 있습니다 (상자 크기 조정).

이 속성을 "테두리 상자"값으로 설정하면 패딩이나 테두리를 추가 할 때 적용 할 요소가 늘어나지 않습니다. 너비가 100px이고 패딩이 10px 인 것을 정의하면 너비가 100px입니다.

box-sizing: border-box;

브라우저 지원에 대해서는 여기를 참조하십시오 . IE7 이하에서는 작동하지 않지만 Dean Edward의 IE7.js 가 이에 대한 지원을 추가 한다고 생각 합니다. 즐겨 :)

— 마르코 자르 딤
소스
45
드디어! 나는이 정확한 기능을 약 10 년 동안 기다리고 있습니다. Pity IE7은 그것을 지원하지 않지만 항상 IE를 사용하는 사람들은 아름다운 레이아웃을 가질 자격이 없다고 생각합니다.
— cronoklee
2
이것은 iPhone / Safari 및 Android의 기본 브라우저에서 작동했지만 위의 절대 위치 솔루션은 작동하지 않았습니다.
— Spud
18
이것은 기본적으로 IE의 쿼크 모드 상자 모델 과 동일 합니다 . 나는 모두가 IE를 미워하는 방법이 재미 있다는 것을 알지만 지금 border-box은 모두의 영웅입니다. :)
— Matt Greer
14
참고로 상자 크기 조정을위한 브라우저 접두사는 이제 -moz를 제외하고 모두 삭제되었습니다. paulirish.com/2012/box-sizing-border-box-ftw 와 좋은 토론에 대한 의견을 참조하십시오
— aponzani
3
예! 이것이 정답입니다! 100 % 높이로 엎 지르지 않고 부모를 기준으로 물건의 크기를 올바르게 조정합니다. 내가 할 수 있다면 백만 +1을 줄 것입니다.
— Andrew Mao
65

해결책은 높이와 너비를 전혀 사용하지 않는 것입니다! 위쪽, 왼쪽, 오른쪽, 아래쪽을 사용하여 내부 상자를 부착 한 다음 여백을 추가하십시오.

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}
<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>
스 니펫 확장

— 아 몰크
소스
6
최대 - 투표는 기술적으로 정확,하지만 그것은 기본적으로 프랭크의 같은 대답 때문에 (내가 좀 더 친화적 인 sloppier 브라우저에 거기라고 생각한다.)
— 도지
39

더 좋은 방법은 calc () 속성을 사용하는 것입니다. 따라서 귀하의 경우는 다음과 같습니다

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

간단하고 깨끗하며 해결 방법이 없습니다. 값과 연산자 사이의 공백을 잊지 않도록하십시오 (예 : (100%-5px)구문이 손상 될 수 있습니다. 즐기십시오!

— 브라이언 애 더러
소스
6
좋은 해결책. 브라우저 지원을 확인하는 것을
— 잊지
5
패딩이 요소를 각각 10px 넓히고 크게 만들 수 있기 때문에 실제로 각 PLUS 5px 패딩에 100 % 너비와 높이를 제공하지 않습니까?
마지막으로 좋은 해결책이며 나머지는 좋아하지 않고 위, 오른쪽, 아래쪽 및 왼쪽을 0으로 지정하면 위치에서만 작동합니다.
— Gil Epshtain
올바른 생각은 다음과 같습니다. #myDiv {width : calc (100 %-10px); 높이 : calc (100 %-10px); 패딩 : 5px; } 왼쪽에서 5, 오른쪽에서 5 = 10, 위쪽에서 5, 아래쪽에서 5 = 10
— Chris P
21

w3c 사양 높이에 따르면 가시 영역의 높이는 예를 들어 1280x1024 픽셀 해상도 모니터에서 100 % 높이 = 1024 픽셀입니다.

최소 높이는 콘텐츠가 1024px보다 큰 페이지에서 콘텐츠를 포함하여 페이지의 전체 높이를 나타냅니다. 최소 높이 : 100 %는 모든 콘텐츠를 포함하도록 확장됩니다.

다른 문제는 패딩과 테두리가 ie6을 제외한 대부분의 최신 브라우저에서 높이와 너비에 추가된다는 것입니다 (즉, 6은 실제로 논리적이지만 사양에 맞지 않습니다). 이것을 박스 모델이라고합니다. 따라서 지정하면

min-height: 100%;
padding: 5px;

실제로 높이는 100 % + 5px + 5px입니다. 이 문제를 해결하려면 래퍼 컨테이너가 필요합니다.

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>
— 알렉스
소스
4
@ 알렉스 : 그러나 내부 div (패딩 된 것)를 외부 div 높이의 100 %로 만드는 것은 무엇입니까? 내 경험에 따르면 전체 높이 div 안에 약간의 div가 있습니다.
— Lawrence Dol
8

1. 전체 높이 padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>
스 니펫 확장

2. 전체 높이 margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}
<div class="container">Hello world.</div>
스 니펫 확장

3. 전체 높이 border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>
스 니펫 확장

— 스티커
소스
7

이것은 CSS의 명백한 바보 중 하나입니다-아직 추론을 이해하지 못했습니다 (누군가 알고 있다면, 설명하십시오).

100 %는 컨테이너 높이의 100 %를 의미하며 여백, 경계 및 패딩이 추가됩니다. 따라서 부모를 채우고 여백, 경계 또는 패딩이있는 컨테이너를 얻는 것은 사실상 불가능합니다.

또한 브라우저간에 높이 설정이 일관되지 않은 것으로 알려져 있습니다.

내가 게시 한 후 배운 또 다른 것은 백분율이 컨테이너의 길이 , 즉 너비 이며 상대적으로 높이가 백분율보다 가치가 없다는 것입니다.

현재 vh 및 vw 뷰포트 단위가 더 유용하지만 최상위 컨테이너 이외의 다른 경우에는 특히 유용하지 않습니다.

— 로렌스 돌
소스
브라우저가 일관된 동작으로 수렴하기 시작한 이유는 없습니다. 내 답변에 언급 된 책을 확인하십시오.
— Frank Schwieterman 2016 년
올바른 용어를 사용하도록 찬성했습니다. Tex와 내가 본 레이아웃 관리자는 CSS가 특별해야합니다.
— maaartinus
5

다른 해결책은 다른 상자 모델 동작을 가진 display : table을 사용하는 것입니다.

부모의 높이와 너비를 설정하고 확장하지 않고 패딩을 추가 할 수 있습니다. 아이는 100 % 높이와 너비에서 패딩을 뺀 것입니다.

JSBIN

다른 옵션은 상자 크기 속성을 사용하는 것입니다. 둘 다의 문제는 IE7에서 작동하지 않는다는 것입니다.

— 사용자 1721135
소스
4

다른 해결 방법 : 여백과 크기에 백분율 단위를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

여기서 주요 문제는 부모 요소의 크기에 따라 여백이 약간 증가 / 감소한다는 것입니다. 아마도 당신이 선호하는 기능은 여백이 일정하게 유지되고 자식 요소가 간격의 변화를 채우기 위해 커지거나 줄어드는 것입니다. 따라서 디스플레이를 얼마나 조여야하는지에 따라 문제가 될 수 있습니다. (또한 0.3 %와 같이 더 작은 마진을 원할 것입니다).

— ktbiz
소스
3

flexbox가 있는 솔루션 (IE11에서 작동) : ( 또는 jsfiddle에서보기 )

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

합니다 ( CSS 리셋은 반드시 실제 문제에 대한 중요하지 않습니다.)

중요한 부분은 flex: 1( display: flex부모 와 함께 )입니다. 유감스럽게도 Flex 속성의 작동 방식에 대한 가장 타당한 설명은 반응 형 네이티브 문서에서 비롯된 것이므로 어쨌든 참조하십시오 .

(...) flex : 1, 구성 요소에 사용 가능한 모든 공간을 채우고 동일한 부모와 다른 구성 요소간에 고르게 공유하도록 지시합니다.

— 푸치 산
소스
2

Frank의 예는 저를 혼란스럽게했습니다. 포지션을 아직 충분히 이해하지 못했기 때문에 제 경우에는 효과가 없었습니다. 부모 컨테이너 요소는 정적이 아닌 위치를 가져야한다는 점에 유의해야합니다 (그는 언급했지만 간과했지만 그의 예는 아닙니다).

다음은 주어진 패딩과 테두리가있는 자식이 절대 위치를 사용하여 부모를 100 % 채우는 예입니다. 부모는 정상적인 흐름을 유지하면서 자녀의 위치에 대한 참조 점을 제공하기 위해 상대 위치를 사용합니다. 다음 요소 "더 많은 내용"은 영향을받지 않습니다.

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

CSS 포지셔닝을 빠르게 배울 수 있는 유용한 링크

— 피터 eng
소스
0

페이지 본문 여백이 아닌 div 주위의 테두리

또 다른 해결책-페이지 가장자리 주위에 간단한 테두리를 원했고 내용이 그보다 작을 때 높이를 100 % 원했습니다.

테두리 상자가 작동하지 않았으며 고정 위치 지정이 간단한 요구로 잘못 보였습니다.

페이지 본문의 여백에 의존하는 대신 컨테이너에 테두리를 추가 한 결과 다음과 같습니다.

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

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}
— 크리스 랜달
소스
0

이것이 기본 동작입니다 display: block. 2020 년에 고칠 수있는 가장 빠른 방법 display: 'flex'은 부모 요소와 패딩 (예 : 20px )을 설정하는 것 입니다. 그러면 모든 자식의 높이가 100 %입니다.

— 자유형 09
소스
0

-webkit 및 -moz를 추가하는 것이 더 적합합니다.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
— 사용자
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.