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>답변
더 좋은 방법은 calc () 속성을 사용하는 것입니다. 따라서 귀하의 경우는 다음과 같습니다
#myDiv {
width: calc(100% - 5px);
height: calc(100% - 5px);
padding: 5px;
}
간단하고 깨끗하며 해결 방법이 없습니다. 값과 연산자 사이의 공백을 잊지 않도록하십시오 (예 : (100%-5px)구문이 손상 될 수 있습니다. 즐기십시오!
답변
w3c 사양 높이에 따르면 가시 영역의 높이는 예를 들어 1280×1024 픽셀 해상도 모니터에서 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>
답변
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>답변
이것은 CSS의 명백한 바보 중 하나입니다-아직 추론을 이해하지 못했습니다 (누군가 알고 있다면, 설명하십시오).
100 %는 컨테이너 높이의 100 %를 의미하며 여백, 경계 및 패딩이 추가됩니다. 따라서 부모를 채우고 여백, 경계 또는 패딩이있는 컨테이너를 얻는 것은 사실상 불가능합니다.
또한 브라우저간에 높이 설정이 일관되지 않은 것으로 알려져 있습니다.
내가 게시 한 후 배운 또 다른 것은 백분율이 컨테이너의 길이 , 즉 너비 이며 상대적으로 높이가 백분율보다 가치가 없다는 것입니다.
현재 vh 및 vw 뷰포트 단위가 더 유용하지만 최상위 컨테이너 이외의 다른 경우에는 특히 유용하지 않습니다.
