仿Google阅读器网页布局示例

<div style="border: 1px dotted teal; font-size: 9pt; float: right; color: teal; text-align: center;">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/justinyoung/googlelogo2.gif"><br>
仿Google阅读器布局</div>
<h4>说明</h4>
<p>最近因为工作需要需要做个类似抓虾、Google Reader这样的网页订阅页面。这种页面的难点主要是——</p>
<ul style="margin: 0px 2px 15px 25px;">
<li style="">左侧频道列表的高度要根据各种浏览器可视高度动态改变（改变窗口大小时需要动态改变）
    </li>
    <li style="">侧边栏宽度固定，而阅读区域的宽度需要动态改变
    </li>
    <li style="">滚动条的处理
    </li>
    <li style="">IE和FF的兼容性
    </li>
    <li style="">其他一些细节…… </li>
</ul>
<h4>实现思路</h4>
<p>左侧频道列表的高度要根据各种浏览器可视高度动态改变（改变窗口大小时需要动态改变）<br>
—— 需要监听浏览器的resize(FF中)，或者onresize（IE中）事件。</p>
<p>侧边栏宽度固定，而阅读区域的宽度需要动态改变<br>
——参考这篇文章： <a title="《大家一起来博皮——2：液态布局和固态布局，页面框架篇 》" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/11/lets-blog-skin-02.html" target="_blank">《大家一起来博皮——2：液态布局和固态布局，页面框架篇 》</a></p>
<p>滚动条的处理<br>
——需要注意横向滚动条一直不出现，竖向滚动条根据内容多少需要出现滚动条。最需要注意的一点是：需要将body的滚动条隐藏，右侧的滚动条其实是"content_content"的滚动条。</p>
<p>IE和FF的兼容性 <br>
——主要是JavaScript中一些事件名称的区别。</p>
<p>其他一些细节……<br>
——一些细节……</p>
<h4>参考代码</h4>
<textarea id="txtTestCode2" cols="65" rows="12"> &lt;!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
&lt;meta name="keywords" content="yes!b/s!,web标准,杨正祎,博客园,实例代码" /&gt;
&lt;meta name="description" content="这是一个简单yes!b/s!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" /&gt;
&lt;title&gt;yes!b/s!文章示例页面&lt;/title&gt;
&lt;style type="text/css"&gt;
*{
margin:0;
padding:0;
}
body,html{
overflow:hidden;
}
#header{
height:100px;
background-color:red;
}
#sidebar{
float:left;
width:240px;
display:inline;
background-color:yellow;
overflow-y:auto;
overflow-x:hidden;
}
#content{
float:right;
margin-left:-270px;
width:100%;
background-color:deeppink;
}
#content_content{
margin-left:280px;
overflow-y:auto;
overflow-x:hidden;
}
&lt;/style&gt;

&lt;!--
function _resize(){
var size = GetClientSize();
document.getElementById("sidebar").style.height=(size[1]-102)+"px";
document.getElementById("content_content").style.height=(size[1]-102)+"px";
}
if(document.addEventListener) {
window.addEventListener("resize", _resize, false); //FF
} else if(document.attachEvent) {
window.attachEvent("onresize", _resize); //IE
}
function GetClientSize(){
if(document.documentElement.clientWidth){
return [document.documentElement.clientWidth, document.documentElement.clientHeight];
}else{
return [document.body.clientWidth, document.body.clientHeight];
}
}
//--&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="wrap"&gt;
&lt;div id="header"&gt;
这里是头部
&lt;/div&gt;&lt;!--end: header --&gt;
&lt;div id="content"&gt;
&lt;div id="content_content"&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;p&gt;主体内容&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;!--end: content --&gt;
&lt;div id="sidebar"&gt;
&lt;ul &gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;li&gt;侧边栏栏目&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;&lt;!--end:  sidebar--&gt;
&lt;/div&gt;&lt;!--end: wrap --&gt;

&lt;!--
_resize();
//--&gt;

&lt;/body&gt;
&lt;/html&gt;
</textarea><div style="margin-bottom: 15px; clear: both;">
<input value="运行代码" type="button"><input value="复制代码" type="button"><input value="另存代码" type="button"><span style="font-size: 9pt; color: rgb(153, 153, 153);">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<h4>效果截图</h4>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_2q/googleReader2.gif" target="_blank"><img alt="web标准设计" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_2q/googleReader2.gif" height="466" width="526"></a>
<h6>IE下实例效果截图（点击图片查看完整大图）</h6>
</div>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_2q/googleReader.gif" target="_blank"><img alt="web标准设计" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_2q/googleReader.gif" height="466" width="526"></a>
<h6>FireFox下实例效果截图（点击图片查看完整大图）</h6>
</div>