发新贴  快速回复

自适应

″用眼睛、素描
2013-08-09 17:21
 本帖最后由 ″用眼睛、素描 于 2013-8-9 17:23 编辑 

请问谷歌可以,为什么ie和火狐就不行,大家看下!求高人指点<!doctype html>
<html>
<head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            width: 100%; height: 100%;
        }
    </style>
</head>
<body>
    <table width="100%" height="100%" cellpadding="0" cellspacing="0">
        <tr height="28">
            <td>
                <div style="height:100%; line-height:100%;background:#ccc;">top</div>
            </td>
        </tr>
        <tr bgcolor="blue">
            <td>
                <table width="100%" height="100%" cellpadding="0" cellspacing="0">
                    <td bgcolor="green" width="300">
                        <div style="width:100%; height:100%;background:#c00;">left</div>
                    </td>
                    <td>
                        <div style="width:100%; height:100%;background:#fff;">right</div>
                    </td>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>[html]<!doctype html>
<html>
<head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            width: 100%; height: 100%;
        }
    </style>
</head>
<body>
    <table width="100%" height="100%" cellpadding="0" cellspacing="0">
        <tr height="28">
            <td>
                <div style="height:100%; line-height:100%;background:#ccc;">top</div>
            </td>
        </tr>
        <tr bgcolor="blue">
            <td>
                <table width="100%" height="100%" cellpadding="0" cellspacing="0">
                    <td bgcolor="green" width="300">
                        <div style="width:100%; height:100%;background:#c00;">left</div>
                    </td>
                    <td>
                        <div style="width:100%; height:100%;background:#fff;">right</div>
                    </td>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>[/html]
 
创美易-miaov
[html]<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
/*resset*/
body{
background:#4D0000;
padding:0;
margin:0;
}
ul,li,h1,h2{
list-style:none;
padding:0;
margin:0;
}
a{
text-decoration:none;
}
/*header*/
#header,#footer{
width:100%;
height:80px;
line-height:80px;
background:#FC0;
}
/*content*/
#content{
overflow:hidden;
margin:10px auto;
}
.sideLeft {
background:#CC0000;
float: left;
height: 500px;
width: 290px;
margin-right:10px;
margin-top:-500px;
}
.contentRight{
height:500px;
background:#F63;
margin-left:300px;
_margin-left:297px;

}
/*footer*/
#footer{
background:#93C;
}

</style>
</head>

<body>
<div id="header"><h1>欢迎来到妙味茶馆</h1></div>
<div id="content">
<div class="contentRight">右边自适应宽度</div>
<div class="sideLeft">左边固定宽度</div>
</div>
<div id="footer"><h2>谢谢光临!</h2></div>
</body>
</html>[/html]<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
/*resset*/
body{
background:#4D0000;
padding:0;
margin:0;
}
ul,li,h1,h2{
list-style:none;
padding:0;
margin:0;
}
a{
text-decoration:none;
}
/*header*/
#header,#footer{
width:100%;
height:80px;
line-height:80px;
background:#FC0;
}
/*content*/
#content{
overflow:hidden;
margin:10px auto;
}
.sideLeft {
background:#CC0000;
float: left;
height: 500px;
width: 290px;
margin-right:10px;
margin-top:-500px;
}
.contentRight{
height:500px;
background:#F63;
margin-left:300px;
_margin-left:297px;

}
/*footer*/
#footer{
background:#93C;
}

</style>
</head>

<body>
<div id="header"><h1>欢迎来到妙味茶馆</h1></div>
<div id="content">
<div class="contentRight">右边自适应宽度</div>
<div class="sideLeft">左边固定宽度</div>
</div>
<div id="footer"><h2>谢谢光临!</h2></div>
</body>
</html>
2013-08-09 18:02  回复本帖
″用眼睛、素描
创美易-miaov 发表于 2013-8-9 18:02 forum.php?mod=redirect&goto=findpost&pid=20822&ptid=7035
[html]




{:soso_e127:} 
2013-08-09 21:49  回复本帖
 
创美易-miaov
 本帖最后由 创美易-miaov 于 2013-8-10 01:09 编辑 

[html]<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<head>
<style type="text/css">
body,html{
padding: 0;
margin: 0;
}
table,td,tr{
border:none;
padding: 0;
margin: 0;
}
table{
border-collapse:collapse;  
border-spacing:0;
width:100%;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div style="height:50px; line-height:50px;background:#ccc;">top欢迎来到妙味茶馆</div>
</td>
</tr>
<tr>
<td>
<table>
<td style="background:#030;height:300px;">
<div>left谢谢光临!</div>
</td>
<td style="background:#609;height:300px;">
<div>right谢谢光临!</div>
</td>
</table>
</td>
</tr>
</table>
</body>
</html>[/html]<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<head>
<style type="text/css">
body,html{
padding: 0;
margin: 0;
}
table,td,tr{
border:none;
padding: 0;
margin: 0;
}
table{
border-collapse:collapse;  
border-spacing:0;
width:100%;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div style="height:50px; line-height:50px;background:#ccc;">top欢迎来到妙味茶馆</div>
</td>
</tr>
<tr>
<td>
<table>
<td style="background:#030;height:300px;">
<div>left谢谢光临!</div>
</td>
<td style="background:#609;height:300px;">
<div>right谢谢光临!</div>
</td>
</table>
</td>
</tr>
</table>
</body>
</html>
2013-08-10 01:06  回复本帖
无为
你这是要做两列等高加自适应效果么?

用表格是不太可行的,因为表格的百分比在不同浏览器下的解析情况不太一样,而且你里面还少给了一个tr标签。
2013-08-10 10:02  回复本帖
″用眼睛、素描
无为 发表于 2013-8-10 10:02 forum.php?mod=redirect&goto=findpost&pid=20838&ptid=7035
你这是要做两列等高加自适应效果么?

用表格是不太可行的,因为表格的百分比在不同浏览器下的解析情况不太 ...

那么只能用js算高了么?无为哥?
2013-08-10 19:46  回复本帖
 
创美易-miaov
″用眼睛、素描 发表于 2013-8-10 19:46 forum.php?mod=redirect&goto=findpost&pid=20852&ptid=7035
那么只能用js算高了么?无为哥?

{:soso_e140:} 做个布局还js,简直无语啦,哥们儿
2013-08-10 20:33  回复本帖
无为
″用眼睛、素描 发表于 2013-8-10 19:46 forum.php?mod=redirect&goto=findpost&pid=20852&ptid=7035
那么只能用js算高了么?无为哥?

用js算高当然是比较省事儿的办法,不知道你的具体需求是什么,等高的话用css也是可以实现的,只是比较麻烦。
2013-08-11 09:52  回复本帖
″用眼睛、素描
无为 发表于 2013-8-11 09:52 forum.php?mod=redirect&goto=findpost&pid=20855&ptid=7035
用js算高当然是比较省事儿的办法,不知道你的具体需求是什么,等高的话用css也是可以实现的,只是比较麻 ...

可以实现?那你能写个小demo吗?
2013-08-11 16:07  回复本帖
″用眼睛、素描
无为 发表于 2013-8-11 09:52 forum.php?mod=redirect&goto=findpost&pid=20855&ptid=7035
用js算高当然是比较省事儿的办法,不知道你的具体需求是什么,等高的话用css也是可以实现的,只是比较麻 ...

我要的就是等高
2013-08-11 16:08  回复本帖
登录 后才可以发表回复