본문 바로가기

기존카테고리/CSS

Left 높이(100%) 만들기 + 부모 넓이 인식시키기

#wrap{

    overflow:hidden;

    position:relative;

    width:1000px;

    margin:0 auto;

    border:1px solid black;

}

#left_area{

    position:absolute;

    top:0px;

    left:0px;

    bottom:0px;

    width:200px;

    color:#FFFFFF;

    background:black;

}

#content{

    float:right;

    display:block;

    width:750px;

    min-height:300px;

}



<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<?php require_once($_SERVER['DOCUMENT_ROOT'].'/siteTitle.php'); ?>

<link rel="stylesheet" href="/css/reset.css" />

<link rel="stylesheet" href="prc_css.css" />

</head>

<body>

<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->





    <div id="wrap">

     <div id="left_area">

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

         왼쪽영역<br />

     </div>

     <div id="content">컨텐츠영역</div>

 </div>


</body>

</html>


원글: http://hompylove.com/system/bbs/board.php?bo_table=tip&wr_id=25



'기존카테고리 > CSS' 카테고리의 다른 글

체크박스1  (0) 2018.03.15
float 아래 콘텐츠 안밀려올라가기  (0) 2018.03.10
Div 간격이 있을 경우 font-size:0; 를 준다.  (0) 2018.02.01
border 사이즈 합치기  (0) 2018.02.01
CSS 정리  (1) 2017.10.24