CSS : 비율로 폭/높이 설정 팩스 픽셀

StackOverflow https://stackoverflow.com/questions/2434602

  •  19-09-2019
  •  | 
  •  

문제

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

컨테이너가 있습니다 <div> 높이를 설정하고 싶지 않다는 (사이트의 위치에 따라 다르기 때문에) 내부에는 헤더입니다. <div>, 그리고 그리고 그런 다음 순서가없는 목록 CSS가 모두 적용되는 항목.

이것은 이것과 비슷해 보입니다.

Widget

나는 원한다 순서가없는 목록 컨테이너에 남은 방을 가져 가려고합니다 <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, 이와 같이:

#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;

나는 다른 답변 중 일부를 시도했지만 그들 중 누구도 내가 원하는 방식으로 잘 작동하지 않았습니다. 우리의 상황은 우리가 창 헤더가있는 곳에서 매우 비슷했고 창은 창문의 이미지로 창을 재개 할 수있었습니다. 우리는 헤더의 고정 크기를 설명하기 위해 계산을 추가 할 필요없이 크기 조정의 종횡비를 잠그고 싶었고 이미지가 창체를 채우도록했습니다.

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

창 요소에 화면의 다른 요소에 비해 포지셔닝에 기여하는 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>

동일한 목표를 달성하는 또 다른 방법 : 플렉스 박스. 컨테이너를 열 플렉스 상자로 만들면 일부 요소가 고정 크기 (기본 동작)를 갖거나 컨테이너 공간으로 채우거나 수축 할 수있는 모든 자유가 있습니다 (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;

고마워, 나는 당신의 도움으로 광산을 해결했고, div 100% 너비 100% Heigth (하단 막대의 높이)를 원하고 몸에 스크롤 (해킹 / 숨기기 스크롤 막대가 없음)을 원하지 않기 때문에 조금 조정했습니다.

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.에 약간 더 큰 값을 넣었다. 그렇지 않으면 세로 스크롤 바가 나타나고, 가장 가까운 값으로 조정되었습니다.

그 차이는 다이나믹 영역의 요소 중 하나가 제거하는 방법을 모르는 추가 바닥 구멍을 추가하기 때문에 ... 비디오 태그 (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; 비디오 태그에.

이 작업이 특정 상황 에서이 작업이 있는지 확실하지 않지만 내부 DIV에 패딩이 포함 된 DIV가 고정 크기 인 경우 DIV 내부의 내용을 밀어 넣는 것을 발견했습니다. 당신은 당신의 헤더 요소를 플로트하거나 절대적으로 배치해야하지만, 그렇지 않으면, 나는 가변 크기 div에 대해 이것을 시도하지 않았습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top