[css] CSS : 너비 / 높이를 백분율 빼기 픽셀로 설정

Program / 글쓴이

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

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

다음과 같이 보입니다 :

위젯

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

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

답변

나는 이것이 오래된 게시물이라는 것을 알고 있지만 CSS3 호환 브라우저를 작성하는 경우 다음을 사용할 수 있다고 언급 할 가치가 없습니다 calc.

height: calc(100% - 18px);

모든 브라우저가 현재 표준 CSS3 calc () 함수를 지원하는 것은 아니므로 다음과 같이 브라우저 별 함수 버전을 구현해야 할 수도 있습니다.

/* 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%;

부모 컨테이너가있는 한 작동합니다. position: relative;

답변

나는 이것을 위해 Jquery를 사용한다.

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

그런 다음 브라우저 창의 크기를 조정할 때마다 창 크기를 바인딩하여 다시 계산합니다 (컨테이너의 크기가 창 크기로 변경되면)

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

답변

높이를 백분율로 정의하지 말고 다음 top=0과 bottom=0같이 and를 설정하십시오 .

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

답변

17px 헤더 높이

CSS 목록 :

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

헤더 CSS :

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

답변

  1. 픽셀에서 빼려는 요소에 음수 여백을 사용하십시오. (원하는 요소)
  2. overflow:hidden;포함하는 요소 만들기
  3. overflow:auto;원하는 요소 를 켭니다.

그것은 나를 위해 일했다!

답변

상자 크기를 조정하십시오. 목록의 경우 :

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;