css布局

三行两列,自适应宽度、高度 ,兼容firefox和ie
index.jsp
<body id="home">
<div id="header">
    
<jsp:include page="./header.jsp" flush="true" />
</div>
<div id="container">
    
<div id="sidebar">
        
<jsp:include page="./sidebar.jsp" flush="true" />
    
</div>
    
<div id="content_1st"><div id="content_2nd"><div id="content_3rd">
        
<jsp:include page="./content.jsp" flush="true" />
    
</div></div></div>
</div>
<div id="footer">
    
<jsp:include page="./footer.jsp" flush="true" />
</div>

</body>

layout.css
/*-----------------------------------------------
Author:   ison    
Version:  2007.6
----------------------------------------------- 
*/
/*
GLOBAL --------------------- 
*/
body 
{
    margin
: 10px; 
    width
:expression( documentElement.clientWidth < 900 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 900 ? "900" : "auto") : "900px") : "auto" );
}
/*
LAYOUT --------------------- 
*/
#header, #footer 
{width:100%;min-width:900px;}
#sidebar 
{padding:0;width:200px;float:left;margin:0 -200px 0 0;height:auto;}
#footer
{clear:both;}
/*
CONTAINER --------------------- 
*/
#container
{width:100%; height:auto;}
#content_1st 
{margin: 0 0 0 200px; padding: 0; float: right;}
#content_2nd
{width:100%; margin:0;}
#content_3rd
{
    min-width
:700px;
    width
:expression(documentElement.clientWidth<900?(documentElement.clientWidth==0?(body.clientWidth <900?"900":"auto"):"800px"):"auto" );
}
#content_3rd[id]
{overflow:hidden;}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值