728x90
반응형
질문 : 패딩 / 여백이있는 CSS 100 % 높이
HTML / CSS를 사용하여 부모 요소의 100 % 인 너비 및 / 또는 높이를 가지면서도 적절한 패딩이나 여백이있는 요소를 어떻게 만들 수 있습니까?
"적절한"이란 부모 요소의 높이 200px padding = 5px height = 100% 를 border = 5px 190px 높이의 요소가 부모 요소의 중앙에 위치해야한다는 것을 의미합니다. .
이제 표준 상자 모델이 작동해야한다고 지정하는 방식이 아니라는 것을 알고 있습니다 (정확히 이유를 알고 싶지만 ...). 따라서 분명한 대답은 작동하지 않습니다.
#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 and CSS Design Patterns "를 읽고 이런 종류의 일을하는 방법을 배웠다. 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>출처 : https://stackoverflow.com/questions/485827/css-100-height-with-padding-margin
728x90
반응형
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
| 배경 이미지 데이터를 CSS에 Base64로 내장하는 것이 올바른 방법인가? (0) | 2021.08.20 |
|---|---|
| 필요하지 않은 경우 CSS 스크롤 막대 숨기기 (0) | 2021.08.20 |
| A4 용지 크기 페이지에서 HTML 페이지를 만드는 방법 (0) | 2021.08.13 |
| [CSS] 글자의 절반에 css를 적용 하는 방법 (0) | 2021.08.12 |
| jQuery를 사용하여 HTML 요소를 만드는 가장 효율적인 방법 (0) | 2021.08.12 |