<%@ 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%; overflow:auto;}
.right { background-color:olive; float:left; width:500px; height:100px; overflow:auto;}
.divTable {display:table;}
.divTr {display:table-row;}
.divTd {display:table-cell;}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(window).resize(function () {
setTimeout(function () {
var w1 = $('.body').innerWidth();
var w2 = $('.left').innerWidth();
var h1 = $('.body').innerHeight();
$('.right').css('width', w1 - w2);
$('.right').css('height', h1);
}, 1000);
});
</script>
</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>
여기서 핵심은...
이부분.
resize 가 발생할때 처리할 구문...
이렇게 해놓으면...
원래 이랬던 것이, 창의 크기를 변경 시키면...
요렇게 창의 크기에 맞에 셀크기를 조정해 준다.
여기서 "setTimeout" 을 둔것은 가끔 수치를 잘못 가져 오는데, 이걸 방지하기 위함이다.
하지만... 이렇게 해도 가끔 수치가 안맞아 레이아웃이 깨진다는거...
결국, 이걸 100% 신뢰 할 정도는 아니다.
그냥, 가끔 필요할 때 쓸만하다는 정도...
