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

479

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

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

다음과 같이 보입니다 :

위젯

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

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

css  height  pixel 
— 메가 맷
소스
6
여백을 설정 하시겠습니까? __
— kennytm
@ KennyTM, 나는 당신이 17px의 순서없는 목록에 여백을 올려 놓을 것을 제안한다고 가정합니다. 그러나 이것은 단지 전체 목록을 아래로 밀어냅니다. 컨테이너에 유지되도록 수축되지 않습니다. 기본적으로 현재 높이는 유지되지만 17px만큼 내려갑니다. 이 방법으로 문제를 해결할 수는 없지만이 기술을 사용하는 다른 온라인 접근 방식을 보았 기 때문에 올바른 방향으로 나아가는 단계라고 생각합니다.
— MegaMatt
방금 게시 한 내 질문 에서이 문제를 해결했습니다. stackoverflow.com/a/10420387/340947
— Steven Lu
— 200_success

답변:

895

나는 이것이 오래된 게시물이라는 것을 알고 있지만 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);
— 레비 보 텔류
소스
5
예, 당분간은 정상입니다.
— Levi Botelho
1
IE10 및 Chrome 27에서 작동합니다. 선생님, 저의 괴물입니다!
— BrainSlugs83
3
@LeviBotelho 내 나쁜. 운영자 주위에 공간이 없었습니다.
— 사용자
20
또한 Less를 사용하면 lessc --strict-math=on내부 표현식을 평가하지 않기 위해 파일을 더 잘 컴파일하는 것이 좋을 것입니다 calc.-내가 직면하고 많은 시간을 보낸 문제 (2.0.0 미만)
— Dmitry Wojciechowski
34
빼기 기호 주위의 공백을 선택하지 않은 것을 참고 : 100%-18px, 100%- 18px,와 100% -18px내가 테스트 브라우저에서 작동하지 않았다.
— nisetama
71

약간 다른 접근 방식을 위해 목록에서 다음과 같은 것을 사용할 수 있습니다.

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

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

— 니콜라스 갤러
소스
1
고마워요 부모 컨테이너가 position: relative;나를 걸려 넘어 지고 있었습니다.
— gthmb
저처럼 궁금해하는 사람들을 위해 : 직책은 absolute자식 컨테이너 안에 있어야 relative합니다.
— Greg
계속 (죄송합니다) : 그러나 부모는 위치를 지정하기 만하면되며 (높을 수도 있음 absolute) 높이를 100 %로 설정해야합니다.
— Greg
1
불행히도 Safari iOS 8에서는 작동하지 않습니다. (Android 4.1 기본 브라우저 및 표준 FF 34에서 테스트 완료) :-(
— Greg
이는 경우에 따라 작동 할 수도 있지만 절대적으로 배치 된 요소가 정상 흐름에서 제거되므로 문제가 발생할 수도 있습니다 . stackoverflow.com/a/12821537/4173303을 참조하십시오 .
— Christophe Weis
26

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

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

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

$(window).resize(function() { setSizes(); });
— 부푼
소스
12
@puffpio, 확실히 JS는 사례별로이를 수행하는 방법입니다. 그러나 내가 말했듯이 CSS를 일반화하여 여러 페이지 (마스터 페이지에서 상속되는)에 적용하려고합니다. 그래서 JS를 사용하지 않는 것을 선호합니다. 그러나 답변 주셔서 감사합니다.
— MegaMatt
7
JavaScript에 스타일을 넣지 마십시오.
— Greg
8
@greg, CSS에 더 유용한 기능이 있다면 도움이 될 것입니다. 당신이 해킹해야 할 일 중 일부는 말도 안됩니다.
— 조나단.
1
@puffpio 정말 좋은 해결책입니다. 그러나 창에서 이벤트를 바인딩하는 것은 좋은 해결책이 아닙니다. 내 페이지에 3-4 이상의 요소가 있으면 창 크기 조정 핸들러에서 각 요소의 높이와 너비를 업데이트해야합니다. 이것은 CSS 솔루션보다 약간 느립니다.
— sachinjain024
1
"xyz를 JavaScript에 넣지 마십시오"는 "브라우저 시장의 80 %를 지원하지 않습니다"라고 말하는 것과 같습니다.
— Beejor
16

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

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}
— 칼레 지
소스
높이를 퍼센트로 설정하지 않은 이유를 설명해 주시겠습니까?
— Shrikant Sharat
@ShrikantSharat 이것은 절대적으로 배치 된 요소에 대한 시각적 형식 지정 사양의 일부입니다 . 이 솔루션은 가능성 5를 활용합니다. 5. " '높이'는 '자동', '맨 위'및 '아래'가 '자동'이 아닌 경우 '여백 상단'및 '여백 하단'에 대한 '자동'값이 설정됩니다. 0으로 설정하고 '높이'를 해결하십시오. " 브라우저는 부모의 상단과 하단에서 얼마나 멀리 있어야하는지 알고 있기 때문에 요소의 높이를 계산할 수 있습니다.
— Ross Allen
적어도 Firefox에서는 작동하지 않는 것 같습니다. 모든 상위 요소가 height:100%및로 설정된 경우에도 마찬가지입니다 display:block. 그렇지 않으면 매우 우아한 솔루션이 될 것입니다. 흥미롭게도, margin:auto가로 방향으로 잘 작동하더라도 고정 너비 객체를 세로로 가운데에 배치하지 못합니다.
— Beejor
8

17px 헤더 높이

CSS 목록 :

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

헤더 CSS :

height: 17px;
float: left;
width: 100%;
— 홉페
소스
그렇습니다.
— dclowd9901
1
그것은 내가 바랐던 것처럼 잘 작동하지 않았습니다. 정렬되지 않은 목록이 해당 헤더 div 아래에서 시작되고 있습니다. 헤더 div는 컨테이너의 공간을 차지하므로 패딩 탑을 17px로 올리면 컨테이너 div의 상단에서 17px가 아니라 이미 위의 그림에서 17px 아래로 밀어 넣습니다. 위의 답변에 제공된 CSS로 얻은 사진은 다음과 같습니다. i41.tinypic.com/mcuk1x.jpg . 노력해 주셔서 감사합니다. 빠진 것 같으면 알려주세요. Btw, 나는 오버 플로우 : 정렬되지 않은 목록의 auto도 있습니다.
— MegaMatt
2
실제 CSS를 게시하면 상호 작용이 정확히 무엇인지 알 수 있으므로 문제 해결이 훨씬 쉬워집니다. 당신이 시도 할 수있는 또 다른 것은 당신의 ul에 부정적인 상단 마진입니다. ul { margin-top: -17px; }
— ghoppe
7
  1. 픽셀에서 빼려는 요소에 음수 여백을 사용하십시오. (원하는 요소)
  2. overflow:hidden;포함하는 요소 만들기
  3. overflow:auto;원하는 요소 를 켭니다.

그것은 나를 위해 일했다!

— 가장 나쁜
소스
3
이것은 나를 위해 매력처럼 작동했습니다 (오버플로를 변경할 필요조차 없었습니다). 좋은 해결책, 감사합니다!
— Aaj
1
엄청나 다! 널리 사용되는 "CSS calc"솔루션에 대해 배우는 것이 즐거웠지만 훨씬 간단하고 브라우저 지원이 더 넓습니다. 네거티브 마진이 완벽합니다!
— Simon Steinberger
이것은 매우 우아하고 호환 가능한 솔루션입니다. 주요 단점은 요소의 높이가 고정되어 있어야한다는 것입니다. 그렇지 않으면 JS를 사용하거나 calc()런타임에 중앙에 배치해야합니다. 그러나 많은 경우에 이것은 문제가되지 않습니다. 명심해야 할 또 다른 사항은 나중에 코드를 디버깅 할 때 여백, 패딩 및 오프셋에 많은 음수 값을 사용하면 혼동을 일으킬 수 있으므로 간단하게 유지하십시오.
— Beejor
5

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

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;
— 빛
소스
3

동일한 목표를 달성하는 또 다른 방법 : flex 상자 . 컨테이너를 열 플렉스 상자로 설정하면 일부 요소가 고정 크기 (기본 동작)를 갖거나 컨테이너 공간을 채우거나 축소 (flex-grow : 1 및 flex- 수축 : 1).

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

참조 https://jsfiddle.net/2Lmodwxk/을 (효과를 통지 확장하거나 창을 줄이기 위해 시도)

참고 : 속기 속성을 사용할 수도 있습니다.

   flex:1 1 auto;
— 타 룰렌
소스
나는 이것이 원래의 질문에서 18px의 헤더 div에 설정된 높이를 지정하지 않아도되고 패딩 및 여백과 같은 것을 뺄 필요가 없기 때문에 이것이 가장 좋은 대답이라고 생각합니다. 설정된 픽셀이 없으며 모든 것이 스스로 처리됩니다.
— MegaMatt
2

나는 다른 답변 중 일부를 시도했지만 그중 어느 것도 내가 원하는대로 작동하지 않았습니다. 우리는 창 헤더가 있고 창 본문의 이미지로 창 크기를 조정할 수있는 상황이 매우 유사했습니다. 우리는 헤더의 고정 크기를 설명하기 위해 계산을 추가 할 필요없이 크기 조정의 종횡비를 잠그고 이미지가 여전히 창 몸체를 채우도록하고 싶었습니다.

아래에서 나는 우리의 상황에 잘 맞는 것처럼 보이고 대부분의 브라우저에서 호환되어야하는 것을 보여주는 매우 간단한 스 니펫을 만들었습니다.

창 요소에 20px의 여백을 추가하여 화면의 다른 요소와 관련하여 배치하는 데 기여하지만 창의 "크기"에는 영향을 미치지 않습니다. 그런 다음 창 머리글이 절대적으로 배치되어 (다른 요소의 흐름에서 제거되어 정렬되지 않은 목록과 같은 다른 요소가 이동되지 않도록) 상단이 -20px에 위치하여 헤더를 여백 안에 배치합니다 창의. 마지막으로 ul 요소가 창에 추가되고 높이를 100 %로 설정하여 창 본문을 채울 수 있습니다 (여백 제외).

*,*:before,*:after
{
  box-sizing: border-box;
}

.window
{
  position: relative;
  top: 20px;
  left: 50px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
}

.window-header
{
  position: absolute;
  top: -20px;
  height: 20px;
  border: 2px solid black;
  width: 100%;
}

ul
{
  border: 5px dashed gray;
  height: 100%;
}
<div class="window">
  <div class="window-header">Hey this is a header</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>
스 니펫 확장

— TJ 록펠러
소스
1

고마워, 나는 당신의 도움으로 내 문제를 해결했다. 나는 div 100 % 너비 100 % 높이 (하단 막대의 높이가 적음)를 원하고 몸에 스크롤이 없거나 (해킹 스크롤 막대가 숨기지 않음) 약간 조정했습니다.

CSS의 경우 :

 html{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 body{
  position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 div.adjusted{
  position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
 }
 div.the_bottom_bar{
  width:100%;height:31px;margin:0px;border:0px;padding:0px;
}

HTML의 경우 :

<body>
<div class="adjusted">
 // My elements that go on dynamic size area
 <div class="the_bottom_bar">
  // My elements that goes on bottom bar (fixed heigh of 31 pixels)
 </div>  
</div>

그 트릭을 수행했습니다. 예, 하단 막대 높이보다 하단에 대해 div.adjusted 값을 조금 크게 설정했습니다. 그렇지 않으면 세로 스크롤 막대가 나타납니다. 가장 가까운 값으로 조정되었습니다.

그 차이는 동적 영역의 요소 중 하나가 제거하는 방법을 모르는 여분의 하단 구멍을 추가하기 때문입니다 ... 비디오 태그 (HTML5)입니다.이 CSS로 비디오 태그를 넣습니다 ( 따라서 바닥 구멍을 만들 이유는 없지만 그렇게합니다.)

 video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

Objetive : 브라우저의 100 %를 차지하는 비디오를 보유하고 (브라우저 크기를 조정할 때 화면 크기를 변경하지 않고 동적으로 크기를 조정) 비디오, 텍스트, 버튼 등이있는 div에 사용되는 바닥 공간을 줄입니다 (및 유효성 검사기) 물론 w3c & css).

편집 : 이유는 비디오 태그가 텍스트가 아니라 블록 요소가 아니기 때문에이 CSS로 수정했습니다.

 video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

display:block;on 비디오 태그를 참고하십시오 .

— 클라우디오
소스
0

포함 된 div가 고정 크기 인 경우 내부 div의 패딩이 div 내부의 내용을 밀어 넣는 것으로 나타났습니다. 헤더 요소를 플로팅하거나 절대적으로 배치해야하지만 가변 크기 div에 대해서는 시도하지 않았습니다.

— dclowd9901
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.