打造自己最酷最簡潔的CSS+DIV網頁佈局 (Js優化版)

iDotNetSpace發表於2008-09-25
CSS網頁JS優化

上一篇打造自己最酷最簡潔的CSS+DIV網頁佈局 還是有些缺陷,就是在IE和FF中顯示時,Mainer背景色有差異,需要JS來彌補:

也不多說了,看程式碼走人.

1.解決了左邊寬度固定的問題、
2.解決了IE中左右兩個DIV之間有空隙的問題
3.解決了高度問題

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--&gt<HTML>
<head>
<title>Cool DIV Layertitle>
<style>
*{margin:0 ;}
#PageDiv{text-align:center; background-color:red;width:100%}
#PageDiv #Layer{margin:auto; text-align:left; width:80%;}
#PageDiv #Layer DIV{width:100%;}
#PageDiv #Layer #Header{background-color:green;clear:both;}
#PageDiv #Layer #Footer{background-color:#eee;text-align:center;clear:both;}
#PageDiv #Layer #Mainer{background-color:gray;}
#PageDiv #Layer #Mainer #Lefter,#PageDiv #Layer #Mainer #Righter{margin:0;padding:0;}
#PageDiv #Layer #Mainer #Lefter{background-color:#390;float:left;width:150px;height:auto;}
#PageDiv #Layer #Mainer #Righter{background-color:#e93;width:100%;height:auto;}
style>
<!--[if IE]>

--&gt


<script>
function $(o){
    return document.getElementsByName(o);
}
function F(o){
    return document.getElementById(o);
}

function ini(){
    var mainer = F("Mainer");
    var lefter = F("Lefter");
    var righter = F("Righter");

    mainer.style.height = ((lefter.clientHeight>righter.clientHeight)?lefter.clientHeight:righter.clientHeight ) + "px"; 
}
/*
clientHeight內容可視區域的高度
scrollHeight是網頁內容實際高度，IE:可以小於 clientHeight;FF:最小值是 clientHeight
*/
script>


head>
<body onload="ini()">
<div id="PageDiv">
    <div id="Layer">
     <div id="Header">
       div.div.head
    div>
     <div id="Mainer">
        <div id="Lefter">
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />
        div.lefter <p />

    div>
    <div id="Righter">div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
        div.righter <p />
    div>
    div>

    <div id="Footer">
       div.div.footer
    div>
   div>
div>
body>
<HTML>

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-464297/，如需轉載，請註明出處，否則將追究法律責任。

相關文章