我开始认为这是不可能的,但我想我会问你们.
基本上它是一个2列布局,但“业务”需要以下内容：
– 始终占据整个浏览器窗口
-Accommodate调整浏览器窗口的大小
-Left列将是固定宽度,但该页面到页面的宽度应该是灵活的.
-Left column在顶部有一个固定高度的区域.
-Left列具有底部区域.它应该占用浏览器窗口的剩余垂直空间.如果内容非常大,则只有该区域的滚动条.
– 右列应占用浏览器窗口的剩余水平空间.
– 右列在顶部有一个固定高度的区域.
-Right列有一个底部区域.它应该占用浏览器窗口的剩余垂直空间.如果内容非常大,则只有该区域的滚动条.
我已经尝试了一切… divs,浮动,绝对定位,表格,表格中的div …
这有可能吗？
这是一个应该是什么样子的图像：
http://imgur.com/zk1jP.png
解决方法
这根本不可能,你不应该需要javascript.如果你关心那个浏览器,你确实需要一些IE6特定的黑客攻击.
布局的关键是您可以在绝对定位的元素上设置一个或多个边缘位置.这是一篇关于该技术的好文章：http://www.alistapart.com/articles/conflictingabsolutepositions/
这是一个演示：http://www.spookandpuff.com/examples/2col2section.html
和来源：
<!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" xml:lang="en" lang="en">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>2 col,2 section layout.</title>
<style type="text/css" media="screen">
#leftColumn {
position:absolute;
top:10px;
bottom:10px;
left:10px;
width:400px;
}
#rightColumn {
position:absolute;
top:10px;
bottom:10px;
right:10px;
left:410px;/* This must equal the total width of the #leftColumn,incl padding,border,margin,etc. */
}
.topSection{
position:absolute;
top:10px;
height:120px;
left:10px;
right:10px;
padding:10px;
}
.bottomSection{
position:absolute;
bottom:10px;
top:160px; /* This must equal the total height of the .topSection,etc. */
left:10px;
right:10px;
padding:10px;
overflow-y:auto;
}
/* Debug styles */
body {background-color:#CCC;}
div {border:1px solid #FFF;}
#leftColumn {background-color:#7EF4B0;}
#rightColumn {background-color:#EEF4A7;}
#leftColumn .topSection{background-color:#56A97A;}
#rightColumn .topSection{background-color:#D6D06D;}
</style>
</head>
<body>
<div id="leftColumn">
<div class="topSection">
<p>Left column,top section.</p>
</div>
<div class="bottomSection">
<p>Left column,bottom section.</p>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="rightColumn">
<div class="topSection">
<p>Right column,top section.</p>
</div>
<div class="bottomSection">
<p>Right column,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
有一些技巧：首先,我只在Firefox中对此进行了测试,以便为您提供一般性的想法 – 我还没有添加一些IE所需的修复程序：查看列表中的文章以获取详细信息.
为了说明这个想法,我允许在所有方框周围留出10px的额外空间 – 你可能会在真实布局中将它们设置为0.
您可以使用以下规则在列之间以不同方式设置.topSection的高度：
#leftColumn .topSection {height:xxx}
#leftColumn .bottomSection {top:xxx}
#rightColumn .topSection {height:yyy}
#rightColumn .bottomSection {top:yyy}
我会使用一个带有类(或body标签上的类)的容器来指定左列的宽度,例如：
#container.narrow #leftColumn {width:100px}
#container.medium #leftColumn {width:200px}
#container.wide #leftColumn {width:400px}
这允许您定义一组可以在其间切换的宽度“模板”.
