大佬教程收集整理的这篇文章主要介绍了css – 不可能的布局？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
基本上它是一个2列布局,但“业务”需要以下内容：
– 始终占据整个浏览器窗口
-Accommodate调整浏览器窗口的大小
-Left列将是固定宽度,但该页面到页面的宽度应该是灵活的.
-Left column在顶部有一个固定高度的区域.
-Left列具有底部区域.它应该占用浏览器窗口的剩余垂直空间.如果内容非常大,则只有该区域的滚动条.
– 右列应占用浏览器窗口的剩余水平空间.
– 右列在顶部有一个固定高度的区域.
-Right列有一个底部区域.它应该占用浏览器窗口的剩余垂直空间.如果内容非常大,则只有该区域的滚动条.
我已经尝试了一切… divs,浮动,绝对定位,表格,表格中的div …
这有可能吗？
这是一个应该是什么样子的图像：
http://imgur.com/zk1jP.png
布局的关键是您可以在绝对定位的元素上设置一个或多个边缘位置.这是一篇关于该技术的好文章：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 @R_487_10586@l 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 @R_487_10586@l 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}
这允许您定义一组可以在其间切换的宽度“模板”.
以上是大佬教程为你收集整理的css – 不可能的布局？全部内容，希望文章能够帮你解决css – 不可能的布局？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。