[예제]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testDivScroll.aspx.cs" Inherits="web_Tmp_testDivScroll" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0; padding:0;
border:0;
}
html, body, .form, .wrap, .body
{ height:100%; }
.wrap { width:100%;}
.head { background-color:aqua;}
.body { background-color:aliceblue;; height:100%;}
.footer { clear:both; background-color:black;}
.left { background-color:hotpink; float:left; width:100px; height:100%;}
.right { background-color:olive; float:left; width:500px;}
.divTable {display:table;}
.divTr {display:table-row;}
.divTd {display:table-cell;}
</style>
</head>
<body>
<form id="form1" class="form" runat="server">
<div class="wrap divTable">
<div class="head divTr">head</div>
<div class="body divTr">
<div class="left divTd">left</div>
<div class="right divTd">
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
right<p/>right<p/>
</div>
</div>
<div class="footer divTr">footer</div>
</div>
</form>
</body>
</html>
이렇게 하고 보면.... 스크롤이 없을 때는...
이렇게 정상적으로 보이지만.... 스크롤이 생기면...
height 100% 로 잡아놓은 영역이 희안하게 동작한다.
스크롤이 생기는 순간 100% 속성이 무시됨.
왜 그런지는 모르겠지만, 하여튼 스크롤만 생기면 이렇게 된다.
이걸 바로 잡으려면...
저기 100% 로 잡혀 있는 곳에 속성을 "overflow:auto" 를 추가 해 주면 됨.
그러면....
이렇게 스크롤이 생겼을 때도 형태를 계속 유지함.
