CSS 100% 높이(패딩/마진 포함)
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픽셀 패딩으로 나타나도록 하는 것이 과제입니다.
저는 "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>CSS3에는 상자 모델이 너비/높이를 계산하는 방법을 변경하는 데 사용할 수 있는 새로운 속성이 있습니다. 이 속성을 상자 크기 조정이라고 합니다.
이 속성을 "경계 상자" 값으로 설정하면 패딩이나 테두리를 추가할 때 확장되지 않도록 적용할 요소가 만들어집니다.너비가 100px이고 패딩이 10px인 것을 정의해도 너비는 100px입니다.
box-sizing: border-box;
브라우저 지원은 여기를 참조하십시오.IE7 이하에서는 작동하지 않지만 Dean Edward의 IE7.js가 지원을 추가한다고 생각합니다.즐기세요 :)
해결책은 높이와 너비를 전혀 사용하지 않는 것입니다!위, 왼쪽, 오른쪽, 아래를 사용하여 안쪽 상자를 부착한 후 여백을 추가합니다.
.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>은 더나방다같습다니음과은법은▁the다▁with▁the같▁is니습▁way▁better더.calc() 의 경우는 .그래서, 당신의 사례는 다음과 같습니다.
#myDiv {
width: calc(100% - 10px);
height: calc(100% - 10px);
padding: 5px;
}
간단하고 깨끗하며 해결 방법이 없습니다. 않도록 하십시오(예: " 사예공잊하않십시오록도지을백의이자산연과값예(하▁just:십시오▁(▁between▁space▁operator").(100%-5px)구문이 깨질 겁니다맛있게 드세요!
w3c 사양 높이는 예를 들어 1280x1080 픽셀 해상도 모니터의 100% 높이 = 1024 픽셀에서 볼 수 있는 영역의 높이를 나타냅니다.
min-height는 콘텐츠를 포함한 페이지의 전체 높이를 의미하므로 콘텐츠가 1024m보다 큰 페이지에서는 콘텐츠를 모두 포함하도록 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>
(함이포)로 풀 padding
body {
margin: 0;
}
.container {
min-height: 100vh;
padding: 50px;
box-sizing: border-box;
background: silver;
}<div class="container">Hello world.</div>(함이포)로 풀 margin
body {
margin: 0;
}
.container {
min-height: calc(100vh - 100px);
margin: 50px;
background: silver;
}<div class="container">Hello world.</div>(함이포)로 풀 border
body {
margin: 0;
}
.container {
min-height: 100vh;
border: 50px solid pink;
box-sizing: border-box;
background: silver;
}<div class="container">Hello world.</div>이것은 CSS의 완전한 어리석음 중 하나입니다. 저는 아직 그 추론을 이해하지 못했습니다(누군가 알고 있다면 설명해 주십시오).
100%는 용기 높이의 100%를 의미합니다. 여기에 여백, 테두리 및 패딩이 추가됩니다.따라서 부모를 채우고 여백, 테두리 또는 패딩이 있는 컨테이너를 얻는 것은 사실상 불가능합니다.
또한 높이 설정은 브라우저 간에도 일관성이 없는 것으로 유명합니다.
제가 이 글을 올린 이후로 제가 배운 또 다른 것은 그 비율이 용기의 길이, 즉 너비에 비례한다는 것입니다. 즉, 그 비율은 높이에 비해 훨씬 더 가치가 없다는 것입니다.
요즘에는 vh 및 vw 뷰포트 유닛이 더 유용하지만 여전히 최상위 컨테이너 이외의 다른 용도로는 특히 유용하지 않습니다.
또 다른 해결책은 박스 모델 동작이 다른 디스플레이:테이블을 사용하는 것입니다.
부모에 높이와 너비를 설정하고 확장하지 않고 패딩을 추가할 수 있습니다.아이는 패드를 뺀 높이와 폭이 100%입니다.
다른 옵션은 상자 크기 속성을 사용하는 것입니다.두 가지 모두의 유일한 문제는 IE7에서 작동하지 않는다는 것입니다.
다른 솔루션:여백과 크기에 백분율 단위를 사용할 수 있습니다.예:
.fullWidthPlusMargin {
width: 98%;
margin: 1%;
}
여기서 주요 문제는 상위 요소의 크기에 따라 마진이 약간 증가/감소한다는 것입니다.아마도 선호하는 기능은 여백이 일정하게 유지되고 하위 요소가 증가/축소되어 간격의 변화를 채우는 것입니다.따라서 디스플레이를 얼마나 조여야 하는지에 따라 문제가 발생할 수 있습니다. (저도 0.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, 사용 가능한 모든 공간을 채우도록 구성요소에 지시하고 동일한 상위 구성요소를 가진 다른 구성요소 간에 균등하게 공유합니다.
-webkit와 -moz를 추가하는 것이 더 적절할 것입니다.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
프랭크의 예는 저를 약간 혼란스럽게 했습니다. 저는 아직 포지셔닝을 충분히 이해하지 못했기 때문에 제 경우에는 효과가 없었습니다.상위 컨테이너 요소는 정적이지 않은 위치를 가져야 합니다(그가 이를 언급했지만 저는 간과했습니다. 그의 예에서는 그렇지 않았습니다).
다음은 주어진 패딩과 테두리가 부모를 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 포지셔닝을 빠르게 학습할 수 있는 유용한 링크
이 동작은 다음의 기본 동작입니다.display: block2020년에 고칠 수 있는 가장 빠른 방법은 설정하는 것입니다.display: 'flex'상위 요소 및 패딩의 경우(예: 20인치) 모든 하위 요소의 높이는 높이에 비해 100%입니다.
페이지 본문 여백이 아닌 div 주위의 테두리
다른 해결책 - 저는 단지 제 페이지 가장자리의 간단한 테두리를 원했고, 내용이 그것보다 작을 때는 100% 높이를 원했습니다.
보더 박스는 작동하지 않았고, 그러한 간단한 필요에 대해 고정된 위치 설정이 잘못된 것처럼 보였습니다.
저는 결국 페이지 본문의 여백에 의존하는 대신 제 컨테이너에 테두리를 추가했습니다. 이것은 다음과 같습니다.
body, html {
height: 100%;
margin: 0;
}
.container {
width: 100%;
min-height: 100%;
border: 8px solid #564333;
}
<style type="text/css">
.stretchedToMargin {
position:absolute;
width:100%;
height:100%;
}
</style>
언급URL : https://stackoverflow.com/questions/485827/css-100-height-with-padding-margin
'source' 카테고리의 다른 글
| 큰따옴표 대 작은따옴표 (0) | 2023.06.01 |
|---|---|
| 할당 전에 참조된 로컬(?) 변수 (0) | 2023.06.01 |
| 안드로이드에서 가로 모드를 비활성화하려면 어떻게 해야 합니까? (0) | 2023.06.01 |
| SQL Azure 데이터베이스의 이름을 바꾸시겠습니까? (0) | 2023.06.01 |
| 레이크 과제 내에서 레이크 과제를 실행하는 방법은 무엇입니까? (0) | 2023.06.01 |