html 左中右自適應(yīng)布局(使用calc css表達(dá)式)
發(fā)布時(shí)間：2013-06-13 17:19:02 作者：佚名 
我要評(píng)論
我要評(píng)論在最新的html標(biāo)準(zhǔn)中 有了個(gè)calc css表達(dá)式，我們可以用這個(gè)來(lái)計(jì)算布局。但是在古老的IE中，卻不支持，為了所有瀏覽器的支持，下面與大家分享下使用js來(lái)解決不支持的問題
在最新的html標(biāo)準(zhǔn)中 有了個(gè)calc css表達(dá)式，我們可以用這個(gè)來(lái)計(jì)算布局。
但是在古老的IE中，卻不支持，為了所有瀏覽器的支持，這里用了js來(lái)做。
截圖：
code：
<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
var left,center,right,width;
window.onload=function(){
left=$('left');
center=$('center');
right=$('right');
onresize();
};
window.onresize=function(){
try {
width = document.body.clientWidth;
center.style.width = (width - left.clientWidth - right.clientWidth - 0) + "px";
}catch(e){
//小于0會(huì)報(bào)錯(cuò)
}
};
function $(id){
return document.getElementById(id);
}
</script>
<style>
body,html{
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#left,#center,#right{
width:200px;
height:100px;
background-color:rgb(34,124,134);
float:left;
height:100%;
}
#center{
background-color:red;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>
</html>
但是在古老的IE中，卻不支持，為了所有瀏覽器的支持，這里用了js來(lái)做。
截圖：
code：
復(fù)制代碼
代碼如下:<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script>
var left,center,right,width;
window.onload=function(){
left=$('left');
center=$('center');
right=$('right');
onresize();
};
window.onresize=function(){
try {
width = document.body.clientWidth;
center.style.width = (width - left.clientWidth - right.clientWidth - 0) + "px";
}catch(e){
//小于0會(huì)報(bào)錯(cuò)
}
};
function $(id){
return document.getElementById(id);
}
</script>
<style>
body,html{
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#left,#center,#right{
width:200px;
height:100px;
background-color:rgb(34,124,134);
float:left;
height:100%;
}
#center{
background-color:red;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>
</html>
相關(guān)文章
- 這篇文章主要介紹了詳解CSS 3 的 calc() 方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-01-12
淺談css3中calc在less編譯時(shí)被計(jì)算的解決辦法
這篇文章主要介紹了淺談css3中calc在less編譯時(shí)被計(jì)算的解決辦法的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-12-04
CSS3 Calc實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁(yè)面不跳動(dòng)問題
calc是css3的一個(gè)新功能，用來(lái)指定元素的長(zhǎng)度，calc()最大的好處就是用在流體布局上，可以通過calc()計(jì)算得到元素的寬度。接下來(lái)腳本之家小編給大家分享CSS3 Calc實(shí)現(xiàn)滾動(dòng)2017-09-14CSS3的calc()做響應(yīng)模式布局的實(shí)現(xiàn)方法
這篇文章主要介紹了 CSS3的calc()做響應(yīng)模式布局的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-09-06CSS3 函數(shù)技巧 用css 實(shí)現(xiàn)js實(shí)現(xiàn)的事情(clac Counters Tooltip)
這篇文章主要介紹了如何使用CSS3代碼更好實(shí)現(xiàn)js中效果，clac Counters Tooltip等功能使得代碼更為簡(jiǎn)潔明了,需要的朋友可以參考下2017-08-15使用CSS3中的calc()屬性來(lái)以算式表達(dá)尺寸數(shù)值
calc()的用法十分巧妙,可以像我們?cè)趯W(xué)校做數(shù)學(xué)應(yīng)用題那樣列式子來(lái)計(jì)算長(zhǎng)度寬度等值,從而一定程度上實(shí)現(xiàn)自適應(yīng)布局,下面我們就來(lái)介紹如何使用CSS3中的calc()屬性來(lái)以算式表2016-06-06- 這篇文章主要介紹了淺析CSS中calc()的使用的相關(guān)資料,需要的朋友可以參考下2016-05-10
- 這篇文章主要初步介紹了CSS3中的calc()功能,作者寫作此文時(shí)提及了注意各瀏覽器的支持情況,需要的朋友可以參考下2015-07-14
這篇文章主要介紹了CSS3 calc()會(huì)計(jì)算屬性詳解的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-02-27
