左側(cè)固定寬度，右側(cè)自適應(yīng)寬度的CSS布局
發(fā)布時(shí)間：2010-02-23 16:19:29 作者：佚名 
我要評(píng)論
我要評(píng)論這個(gè)是我練習(xí)做網(wǎng)頁(yè)查資料查到的，有很多不錯(cuò)的布局。將其總結(jié)，并寫(xiě)上自己使用的一些感悟。
第一種方法：
關(guān)于這個(gè)布局，作者是這樣說(shuō)明的：“left和right都貼住左側(cè)。設(shè)置left在right上面(z-index)；在right內(nèi)加個(gè)放內(nèi)容的層(content)；設(shè)置content距離right的左側(cè)為200px，即剛巧等于left的寬度。”
這個(gè)布局有一個(gè)缺點(diǎn)就是，如果我設(shè)置了foot的div，試了很多辦法，都不能根據(jù)content的高度，連著中間的內(nèi)容，自動(dòng)置于HTML頁(yè)面的底部。如有牛人知道解決方法，望留言解答。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
* {margin:0; padding:0; list-style:none; }
.header{ width:100%;height:250px;background-color:#33FF00;}
.logo{width:100%;height:200px;background-color:#330000;}
.nav{width:100%;height:50px;background-color:#660000;}
.wrapper {width: 100%; }
.left {width:200px; height:auto;background:#fcc; position:absolute; left:0;z-index:1;}
.right {width:100%; height:400px;background:#ccc; position:absolute; left:0;}
.content {height:400px;margin-left:200px; background:#ffc; }
.foot { position:absolute;height:100px;background-color:#000000;bottom:0;}
.foot h1, .foot p{color:#FFFFFF;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="left">
<h1>Left</h1>
<p>左側(cè)固定寬度200px</p>
</div>
<div class="right">
<div class="content">
<h1>Content</h1>
<p>右側(cè)寬度自動(dòng)適應(yīng)</p>
</div>
</div>
<div class="foot">
<h1>Foot</h1>
<p>想看看他的位置會(huì)在哪？</p>
</div>
</div>
</body>
</html>
關(guān)于這個(gè)布局，作者是這樣說(shuō)明的：“left和right都貼住左側(cè)。設(shè)置left在right上面(z-index)；在right內(nèi)加個(gè)放內(nèi)容的層(content)；設(shè)置content距離right的左側(cè)為200px，即剛巧等于left的寬度。”
這個(gè)布局有一個(gè)缺點(diǎn)就是，如果我設(shè)置了foot的div，試了很多辦法，都不能根據(jù)content的高度，連著中間的內(nèi)容，自動(dòng)置于HTML頁(yè)面的底部。如有牛人知道解決方法，望留言解答。
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
* {margin:0; padding:0; list-style:none; }
.header{ width:100%;height:250px;background-color:#33FF00;}
.logo{width:100%;height:200px;background-color:#330000;}
.nav{width:100%;height:50px;background-color:#660000;}
.wrapper {width: 100%; }
.left {width:200px; height:auto;background:#fcc; position:absolute; left:0;z-index:1;}
.right {width:100%; height:400px;background:#ccc; position:absolute; left:0;}
.content {height:400px;margin-left:200px; background:#ffc; }
.foot { position:absolute;height:100px;background-color:#000000;bottom:0;}
.foot h1, .foot p{color:#FFFFFF;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="left">
<h1>Left</h1>
<p>左側(cè)固定寬度200px</p>
</div>
<div class="right">
<div class="content">
<h1>Content</h1>
<p>右側(cè)寬度自動(dòng)適應(yīng)</p>
</div>
</div>
<div class="foot">
<h1>Foot</h1>
<p>想看看他的位置會(huì)在哪？</p>
</div>
</div>
</body>
</html>
相關(guān)文章
- 小編今天為大家介紹一篇HTML自適應(yīng)表格的方法，希望對(duì)大家有所幫助。2013-04-03
css 圖片自適應(yīng)寬度 CSS實(shí)現(xiàn)控制圖片自適應(yīng)顯示寬度代碼
由于用戶(hù)上傳的圖片太大自己又不去調(diào)解，導(dǎo)致展示的時(shí)候圖片太大撐開(kāi)了，直接影響了界面的美觀度，于是想使用css屬性嘗試控制下:給圖片設(shè)置顯示最大的寬度,還好Firefox/Ope2013-02-06左定寬度右自適應(yīng)寬度并且等高布局實(shí)現(xiàn)代碼
左側(cè)固定寬，右側(cè)自適應(yīng)屏幕寬;左右兩列，等高布局;左右兩列要求有最小高度，例如：200px;（當(dāng)內(nèi)容超出200時(shí)，會(huì)自動(dòng)以等高的方式增高）要求不用JS或CSS行為實(shí)現(xiàn),那么下面2012-12-24display:table-cell實(shí)現(xiàn)兼容性的兩欄自適應(yīng)布局實(shí)現(xiàn)代碼
display:table-cell實(shí)現(xiàn)兼容性的兩欄自適應(yīng)布局,需要的朋友可以參考下2012-12-07網(wǎng)頁(yè)設(shè)計(jì)技巧:iframe自適應(yīng)高度的問(wèn)題
所謂iframe自適應(yīng)高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個(gè)iframe2012-11-12- 寬度自適應(yīng)：就是元素的寬度根居里面的內(nèi)容來(lái)變化2012-06-14
Button在IE6、7下的自適應(yīng)寬度問(wèn)題解決方法
很早就遇到過(guò)這么個(gè)小問(wèn)題，但由于其并未影響到實(shí)際作用和美觀就沒(méi)有正面解決它，現(xiàn)在，我們來(lái)試著解決它2012-02-23div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng)效果代碼
textarea標(biāo)簽為表單元素，一般用在多行文字的輸入。在web應(yīng)用上常見(jiàn)的是評(píng)論輸入框，微博信息輸入框等。2010-12-27div完美自適應(yīng)動(dòng)態(tài)上下左右居中
div完美自適應(yīng)動(dòng)態(tài)上下左右居中，多用于信息提示框效果。2010-08-10CSS min-height IE6、IE7、FF下DIV自適應(yīng)高度
IE6、IE7、FF下DIV自適應(yīng)高度2010-05-13