CSS에서 height: 100% 가 동작 하도록 설정하기

프로그래밍/HTML, CSS 2018. 9. 27. 01:09
반응형

<div> 태그의 높이를 100%로 줘서 차지할 수 있는 전체 높이를 가지도록 하려고 합니다. 아래와 같이 스타일에 hieght: 100% 를 지정했지만 동작하지 않습니다.


.panel-container {

    height: 100%;

    display: flex;

    flex-direction: row;

    border: 1px solid silver;

    overflow: hidden;

}


div 높이 100%가 동작하지 않는다.



너비나, 높이를 비율(%)로 주게 되면 그 엘리먼트를 포함하고 있는 부모 엘리먼트에 대해 상대적으로 길이가 정해 집니다.


부모 태그가 body 인데, body 는 기본적으로 높이값이 나오지 않습니다. 그러므로 해결 방법은 부모 태그에 높이를 주면 됩니다.


html, body {

    margin: 0;

    height: 100%;

    overflow: hidden;

}


height 100% 동작하도록 지정 결과



원하는대로 높이가 브라우저 전체 높이로 주어졌습니다.


※ 참고

<span> 태그와 같은 display 속성이 기본적으로 inline인 엘리먼트는 너비와 높이를 지정하더라도 무시되어 버립니다. 이때 inline 속성의 특징을 가지면서도 너비와 높이를 지정할수 있도록 하려면 display 속성을 inline-block으로 지정하면 됩니다.

반응형

댓글을 달아 주세요

  • Deborah 2018.09.27 21:13 신고  댓글주소  수정/삭제  댓글쓰기

    정말 오랜만이죠. ㅎㅎㅎ 너무 오래 되어서 절 잊으셨나 했는데 여전 하시군요. ^^ 저의 반려자님은 프로그래머를 코드 멍키라는 표현을 쓰시더군요 ㅋㅋㅋ 하하...

    • pentode 2018.09.28 00:52 신고  댓글주소  수정/삭제

      안녕하세요. 정말 오랜만에 글로 뵙는것 같습니다.ㅎㅎ 잘 지내셨는지요.^^

      코드 멍키는 프로그래머들에게는 잘 알려져 있는 용어 입니다. 고단한 프로그래머의 삶에 대한 자조적인 말이라고나 할까요.ㅎㅎㅎ 원래 세세한 뜻은 창의적인 작업은 못하고, 코드만 생산하는 무능한 단순 코더란 뜻이 있어서 그리 좋은 말은 아닙니다.^^

      코드 멍키를 주제로한 노래도 있습니다.ㅋㅋ

      https://youtu.be/j4TnhemCEmc

      스티브 잡스나 빌게이츠 같은 프로그래머이자 사업가인 사람도 있지만, 대부분의 프로그래머는 단순한 직장인이죠.

      직장 생활의 고단함이나 부조리 같은걸 풍자한 단어가 코드멍키가 아닐까 생각해봅니다.^^

    • Deborah 2018.09.28 08:40 신고  댓글주소  수정/삭제

      오 그런 깊은 뜻이 있을줄이야.. 하하하.

  • 고군 2019.07.29 15:09  댓글주소  수정/삭제  댓글쓰기

    이렇게 하면 안쪽 div까지 height:100% 상속되어서 height:100%되는데 막는 방법있나요?

    • pentode 2019.07.29 20:11 신고  댓글주소  수정/삭제

      이글에서 left panel과 right panel의 높이가 100%가 되도록 설정하고 있습니다. 여기서 left panel과 right panel 내에 들어가는 div태그는 100% 가 되지 않습니다.

      다음 예제를 확인해보세요
      <!DOCTYPE html>
      <html>
      <head>
      <title>레이아웃 테스트</title>
      <style>
      html, body {
      margin: 0;
      height: 100%;
      overflow: hidden;
      }
      .top {
      height: 50px;
      background-color: blue;
      margin:0;
      }
      .panel-container {
      background-color: yellow;
      height: 100%;
      display: flex;
      flex-direction: row;
      border: 1px solid silver;
      overflow: hidden;
      }
      .panel-left {
      width: 200px;
      background-color: pink;
      }
      .panel-right {
      width: 100%;
      background-color: cyan;
      }
      </style>
      </head>
      <body>
      <div class="top"><div>TOP</div></div>
      <div class="panel-container">
      <div class="panel-left">LEFT</div>
      <div class="panel-right">
      <p>Aritcal Title</p>
      <div style="outline: solid 1px red;">Article Contents</div>
      </div>
      </div>
      </body>
      </html>

    • pentode 2019.07.29 20:14 신고  댓글주소  수정/삭제

      위의 예에서 panel-container내의 left와 right를 배치하는데는 flexbox를 사용했습니다. flexbox에 대해서는 https://offbyone.tistory.com/348 글을 참조하세요.