css

사이트에서 일관성과 혼란을 줄이기 위해 재사용 가능한 CSS 클래스를 만들려고 노력하고 있으며 자주 사용하는 한 가지를 표준화하려고 노력하고 있습니다.

<div>높이를 설정하고 싶지 않은 컨테이너 가 있습니다 (사이트의 위치에 따라 다름). 그리고 그 안에는 header <div>가 있고 정렬되지 않은 항목 목록 이 있으며 CSS가 적용된 그들.

다음과 같이 보입니다 :

정렬되지 않은 목록 이 컨테이너의 나머지 공간을 차지하고 <div>헤더 <div>가 18px크다는 것을 알고 싶습니다 . 나는 목록의 높이를 ” 100%빼기 결과”로 지정하는 방법을 모른다 18px.

나는이 질문에 대한 몇 가지 다른 상황 에서이 질문을 보았지만 내 특별한 경우에 다시 물어볼 가치가 있다고 생각했습니다. 이 상황에서 조언이 있습니까?

답변

height: calc(100% - 18px);

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

$(window).resize(function() { setSizes(); });

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

height: 100%;
padding-top: 17px;

height: 17px;
float: left;
width: 100%;

height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;

position: absolute;
left: 0;
top: 0;
height: 10px;

position: relative;