[css] 단위가 다른 값(px 또는% 등)을 사용하여 높이와 너비를 지정하는 방법
이미지는 아래 그림에서???추구하는 느낌!
콜을 사용하세요!
함수
calc는 단위가 다른 값을 계산할 수 있습니다!height: calc(50% - 90px));
샘플 출처
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>saｍple</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header></header>
<main></main>
<div class="box"></div>
<footer></footer>
</body>
</html>
html,
body {
overflow: hidden;
height: 100%;
}
header {
height: 50px;
background-color: pink;
}
main {
height: 50%;
background-color: yellowgreen;
}
.box {
height: calc(50% - 90px);
background-color: skyblue;
}
footer {
height: 40px;
background-color: pink;
}
핑크색 머리글과 꼬리는 px를 지정하고, 노란색과 녹색의 메인 테두리는% 를 지정합니다.
div 탭 (box 클래스) 의 높이를 바디 탭에 수납하는 것이 목적입니다.
calc 조정되었습니다.참고가 됐으면 좋겠어요!
참조 링크
Reference
이 문제에 관하여([css] 단위가 다른 값(px 또는% 등)을 사용하여 높이와 너비를 지정하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/guru_taka/items/5dfc1193da60dbc9cd9a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
