테이블 높이 100%하는법좀 부탁드립니다. 정보
테이블 높이 100%하는법좀 부탁드립니다.본문
제가 원하는건 어느 웹브라우저에서든지 어떤 해상도이던지 그에 맞춰서 알아서 사이즈가 조절될수있는 사이트를 만들어보려고하는데요. 드림위버로 만들고 있구요.
사이트어 어느식으로 구성되있냐면 첨부파일처럼 층층히 테이블을 따로 만들어서 쌓아놓고
100%높이의 테이블을 만들어서 해상도에따라 알아서 조절되도록 만들의도엿는데 분명히 예전에
나모웹으로 만들때는 이런식으로해서 했던기억이들거든요. 근데안되서 알아봣더니 소스맨위에
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
이걸 지우고 그냥 html로 했더니 되는겁니다.근데 이렇게해도 문제가 해상도는 전혀 상관없이 높이가 커져버리네요 제가 27인치 모니터에 해상도 1920x 1080 쓰는데 분명 제생각대로하면 상하스크롤바가 생길일이없거든요 생길정도로 세로로 뭐 넣은것도없고 분명히 공간이 남고 맨아래 테이블에
카피라이트 문구넣어서 이게 어느해상도든지 브라우저 맨하단부에 위치하게 중간에 100%높이 테이블을 넣은건데 뭐가 잘못된건지좀 알려주세요 소스는
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
<style type="text/css">
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.bar {
background-image: url(images/back.jpg);
}
.main {
background-image: url(images/back2.jpg);
width: 100%;
}
.main {
background-image: url(images/back2.jpg);
}
.bar2 {
background-image: url(images/back3.jpg);
}
</style>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="100" rowspan="2"><img src="images/logo.jpg" width="200" height="100" /></td>
<td height="50" bgcolor="#000000"> </td>
</tr>
<tr>
<td height="50" bgcolor="#C80000"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" class="bar"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="400" class="main"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="400"><img src="images/main.jpg" width="400" height="400" /></td>
<td width="100"> </td>
<td width="300"><img src="images/login.jpg" width="300" height="400" /></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td height=100% valign=bottom><tr>
<td height="50" class="bar2"> </td>
</tr>
<tr>
<td height="30" bgcolor="#000000"> </td>
</tr>
</table>
</body>
</html>
이렇습니다.
댓글 전체
아래 참고하세요.
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=euc-kr">
<style>
.ellipsis {font:9pt "굴림"; width:100%; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.colresize {font:9pt "굴림"; cursor:""; }
.input_box {width:expression(this.parentNode.clientWidth-8); }
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 자료출처 : phpschool.com ==> kisses
var mousedown = false; //마우스를 누른 상태
var td = ""; //사이즈 변경할 td
var td_width; //변경할 td의 width,
var x = 0; //마우스 드레그전 가로위치
function TCstartColResize(obj){
mousedown = true;
td = obj;
td_width = td.width;
x = event.clientX;
}
function TCColResize()
{
if (mousedown){
var distX = event.x - x; //이동한 간격
td.width = parseInt(td_width) + parseInt(distX);
}
}
function TCstopColResize(){
mousedown = false;
td = '';
}
function cell_left(obj){//마우스가 셀의 왼쪽인지 측정
if(event.offsetX < 5 && obj.cellIndex!=0)
return true;
else
return false;
}
function cell_right(obj){//마우스가 셀의 오른쪽인지 측정
if(event.offsetX > obj.width-4)
return true;
else
return false;
}
//리사이즈시작
document.onmousedown = function(){
try{
var now_mousedown = window.event.srcElement;
if(now_mousedown.className.toUpperCase()=="COLRESIZE"){
if( cell_left(now_mousedown) ){
now_mousedown = now_mousedown.parentNode.childNodes[now_mousedown.cellIndex-1];
}else if( !cell_right(now_mousedown) ){
return true;//오른쪽도 왼쪽도 아니면 사이즈 조절 안함
}
TCstartColResize(now_mousedown);
}
}catch(e){ return true; }
}
//리사이즈
document.onmousemove = function(){
try{
var now_mousemove = window.event.srcElement;
if(now_mousemove.className.toUpperCase()=="COLRESIZE" || td!=""){
//셀의 가장자리면 마우스 커서 변경
if( cell_left(now_mousemove) || cell_right(now_mousemove) ){
now_mousemove.style.cursor = "col-resize";
}else{
now_mousemove.style.cursor = "";
}
TCColResize(now_mousemove);
}else{
now_mousemove.style.cursor = "";
}
}catch(e){ return true; }
}
//리사이즈종료
document.onmouseup = function(){
try{
var now_mouseup = window.event.srcElement;
//if(now_mouseup.className=="colResize"){
TCstopColResize(now_mouseup);
//}
}catch(e){ return true; }
}
//리사이즈 도중 텍스트 선택 금지
document.onselectstart = function(){
try{
if(td != ""){
return false;
}
}catch(e){ return true; }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div style="width:100%;height:100;overflow-x:auto;overflow-y:auto">
<table width="430" border="0" cellpadding="3" cellspacing="1" bgcolor="#B8B8B8" nowrap style='table-layout:fixed'>
<tr bgcolor="#A5D4D2" align="center" height="25">
<td width="35" class="colresize">선택</td>
<td width="35" class="colresize">순번</td>
<td width="70" class="colresize">품목명</td>
<td width="30" class="colresize">수량</td>
<td width="50" class="colresize">단위</td>
<td width="70" class="colresize">날짜</td>
<td width="70" class="colresize">장소</td>
<td width="70" class="colresize">비고</td>
</tr>
<tr bgcolor="#FFFFFF" height="27" align="center">
<td><Input type="radio" name="radio"></td>
<td>1</td>
<td><input type='text' class="input_box"></td>
<td><input type='text' class="input_box"></td>
<td><select class="input_box"><option>EA</option></select></td>
<td><input type='text' class="input_box"></td>
<td><input type='text' class="input_box"></td>
<td nowrap class="ellipsis">비고 비고 비고 비고 비고 비고 비고 비고 비고</td>
</tr>
</table>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=euc-kr">
<style>
.ellipsis {font:9pt "굴림"; width:100%; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.colresize {font:9pt "굴림"; cursor:""; }
.input_box {width:expression(this.parentNode.clientWidth-8); }
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 자료출처 : phpschool.com ==> kisses
var mousedown = false; //마우스를 누른 상태
var td = ""; //사이즈 변경할 td
var td_width; //변경할 td의 width,
var x = 0; //마우스 드레그전 가로위치
function TCstartColResize(obj){
mousedown = true;
td = obj;
td_width = td.width;
x = event.clientX;
}
function TCColResize()
{
if (mousedown){
var distX = event.x - x; //이동한 간격
td.width = parseInt(td_width) + parseInt(distX);
}
}
function TCstopColResize(){
mousedown = false;
td = '';
}
function cell_left(obj){//마우스가 셀의 왼쪽인지 측정
if(event.offsetX < 5 && obj.cellIndex!=0)
return true;
else
return false;
}
function cell_right(obj){//마우스가 셀의 오른쪽인지 측정
if(event.offsetX > obj.width-4)
return true;
else
return false;
}
//리사이즈시작
document.onmousedown = function(){
try{
var now_mousedown = window.event.srcElement;
if(now_mousedown.className.toUpperCase()=="COLRESIZE"){
if( cell_left(now_mousedown) ){
now_mousedown = now_mousedown.parentNode.childNodes[now_mousedown.cellIndex-1];
}else if( !cell_right(now_mousedown) ){
return true;//오른쪽도 왼쪽도 아니면 사이즈 조절 안함
}
TCstartColResize(now_mousedown);
}
}catch(e){ return true; }
}
//리사이즈
document.onmousemove = function(){
try{
var now_mousemove = window.event.srcElement;
if(now_mousemove.className.toUpperCase()=="COLRESIZE" || td!=""){
//셀의 가장자리면 마우스 커서 변경
if( cell_left(now_mousemove) || cell_right(now_mousemove) ){
now_mousemove.style.cursor = "col-resize";
}else{
now_mousemove.style.cursor = "";
}
TCColResize(now_mousemove);
}else{
now_mousemove.style.cursor = "";
}
}catch(e){ return true; }
}
//리사이즈종료
document.onmouseup = function(){
try{
var now_mouseup = window.event.srcElement;
//if(now_mouseup.className=="colResize"){
TCstopColResize(now_mouseup);
//}
}catch(e){ return true; }
}
//리사이즈 도중 텍스트 선택 금지
document.onselectstart = function(){
try{
if(td != ""){
return false;
}
}catch(e){ return true; }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div style="width:100%;height:100;overflow-x:auto;overflow-y:auto">
<table width="430" border="0" cellpadding="3" cellspacing="1" bgcolor="#B8B8B8" nowrap style='table-layout:fixed'>
<tr bgcolor="#A5D4D2" align="center" height="25">
<td width="35" class="colresize">선택</td>
<td width="35" class="colresize">순번</td>
<td width="70" class="colresize">품목명</td>
<td width="30" class="colresize">수량</td>
<td width="50" class="colresize">단위</td>
<td width="70" class="colresize">날짜</td>
<td width="70" class="colresize">장소</td>
<td width="70" class="colresize">비고</td>
</tr>
<tr bgcolor="#FFFFFF" height="27" align="center">
<td><Input type="radio" name="radio"></td>
<td>1</td>
<td><input type='text' class="input_box"></td>
<td><input type='text' class="input_box"></td>
<td><select class="input_box"><option>EA</option></select></td>
<td><input type='text' class="input_box"></td>
<td><input type='text' class="input_box"></td>
<td nowrap class="ellipsis">비고 비고 비고 비고 비고 비고 비고 비고 비고</td>
</tr>
</table>
</div>
</BODY>
</HTML>