[CSS] 2개의 div를 사용시 높이 부분 조정하는 방법에 질문해보아요.

[CSS] 2개의 div를 사용시 높이 부분 조정하는 방법에 질문해보아요.

QA

[CSS] 2개의 div를 사용시 높이 부분 조정하는 방법에 질문해보아요.

본문

제목에 어떻게 설명이 더 어려운것 같습니다. ㅠㅠ

 

<div class="wrap" style="with:980px"> 

  <div class="aside" style="float:left; width:210px; background:#000; min-height:500px;">

  </div>

 

  <div class="container" style="float:right: 730px; min-height:500px;">

  </div>

</div>

이렇게 가로 980px의 넓이에서  

좌측으로는 aside를 우측으로 container를 사용하게 되면

일반적으로 게시판을 사용하게 되더라도 container의 세로 길이는 최소 500px 보다 길어질때가  

많습니다. 그때의 높이에도 aside의 배경색이 최소 500이 아닌 100%를 다 사용을 하고 싶은데...

 

position:absolute; 를 제외한 다른 방법은 없을까요? 

이 질문에 댓글 쓰기 :

답변 2

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS Reference | display: table</title>
    <style>
      div {
        border: 1px solid #bcbcbc;
      }
      .wrap {
        display: table;
        width: 100%;
      }
      .table-row {
        display: table-row;
      }
      .aside {
        display: table-cell;
        width:210px;
        min-height:500px;
        background:#000;
      }
      .container {
        display: table-cell;
        min-height:500px;
        background:#ccc;
      }
   </style>
  </head>
  <body>
    <div class="wrap">
      <div class="table-row">
        <div class="aside">
          <p>메뉴</p>
        </div>
        <div class="container">
          <p>내용</p>
        </div>
      </div>
    </div>
  </body>
</html> 

display:table-cell 이 있습니다.
답변을 작성하시기 전에 로그인 해주세요.
전체 9
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT