打造自己最酷最简洁的CSS+DIV网页布局 (Js优化版)
上一篇打造自己最酷最简洁的CSS+DIV网页布局 还是有些缺陷,就是在IE和FF中显示时,Mainer背景色有差异,需要JS来弥补:
也不多说了,看代码走人.
1.解决了左边宽度固定的问题、
2.解决了IE中左右两个DIV之间有空隙的问题
3.解决了高度问题
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><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]>
#PageDiv #Layer #Mainer #Lefter{margin-right:-3px;}
-->
<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>
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
--><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]>
#PageDiv #Layer #Mainer #Lefter{margin-right:-3px;}
-->
<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博客 ” ，链接：https://blog.itpub.net/12639172/viewspace-464297/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
C#2.0谓词的简单应用
请登录后发表评论
登录
全部评论
