特殊要求的 div+css三行三列布局有什么好建议？解决方案
日期：2014-05-17 浏览次数：20769 次
特殊要求的 div+css三行三列布局有什么好建议？
先借用一下snmr_com (麒麟厍人) 那个问题的要求：
http://community.csdn.net/Expert/topic/4961/4961132.xml?temp=.883114
要求：
1
上
左中右
下
2
上下：100%宽；左：像素定宽；右：像素定宽；中：自适应宽
上下：像素定高；左中右：自适应高
3
跨浏览器，ie/ff/op，div/span+css，不使用css hack，左中右不使用嵌套
4
文件头含
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "
"http://www.w3.org/TR/html4/loose.dtd ">
5
暂时没想到其他要求，目前找到一个是js控制的
-------------------------------------------------
如果我的要求是如下所述，能实现么？
图示如下：
╓──────────────╖
║Top ║
╟──╥───────╥───╢
║ ║ ║ ║
║ ║ ║ ║
║ ║ ║ ║
║Left║ Center ║Right ║
║ ║ ║ ║
║ ║ ║ ║
║ ║ ║ ║
╟──╨───────╨───╢
║Bottom ║
╙──────────────╜
窗口的滚动条是被hidden的。
要求：
基本和楼主差不多，不同的是：
在浏览器窗口尺寸变化时，页面样子还是这个样子。
其中：
Top, Bottom: 100%宽，根据内容自适应高;
Left, Right: 象素定宽
Center的宽度自适应（窗口宽度-Left宽度-Right宽度）的值
Left, Center, Right的高度要自适应（窗口高度-Top高度-Bottom高度）的值
其实就是Top永远在顶部，Bottom永远在底部，Left、Center、Right永远充满Top和Bottom之外的区域。
简单明了的说就是 设计一个布局，模拟一些类似的客户端应用的样子，比如Eclipse,Visio,VS等。
Top部分也许是放置主菜单和工具栏
Left和Right部分也许是放置一些辅助“窗口”
Bottom部分也许也是放辅助窗口，也许作为StatusBar
Center部分作为一个主要的工作空间，想放什么就放什么并且能滚动里面的内容。
另外有个问题还要请教，有关于那个什么box-model的问题
都说正确的box-model中width应该是除去border,padding等之后的宽度，
那么如果我有如下代码：
<div id= "parent " style= "width:100px;height:100px;border:2px solid red ">
<div id= "child " style= "width:100%;height:100%;border:2px solid green "> text </div>
</div>
我希望parent的尺寸不会自动发生变化，无论应该是100也好,96也好，不要自动变，就保持定义时的大小，
然后child的表现就是充满parent的可用区域，并且parent不出现滚动条，child的边框也全部可见。
这个需求在以前的IE中都不用考虑，以上
先借用一下snmr_com (麒麟厍人) 那个问题的要求：
http://community.csdn.net/Expert/topic/4961/4961132.xml?temp=.883114
要求：
1
上
左中右
下
2
上下：100%宽；左：像素定宽；右：像素定宽；中：自适应宽
上下：像素定高；左中右：自适应高
3
跨浏览器，ie/ff/op，div/span+css，不使用css hack，左中右不使用嵌套
4
文件头含
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "
"http://www.w3.org/TR/html4/loose.dtd ">
5
暂时没想到其他要求，目前找到一个是js控制的
-------------------------------------------------
如果我的要求是如下所述，能实现么？
图示如下：
╓──────────────╖
║Top ║
╟──╥───────╥───╢
║ ║ ║ ║
║ ║ ║ ║
║ ║ ║ ║
║Left║ Center ║Right ║
║ ║ ║ ║
║ ║ ║ ║
║ ║ ║ ║
╟──╨───────╨───╢
║Bottom ║
╙──────────────╜
窗口的滚动条是被hidden的。
要求：
基本和楼主差不多，不同的是：
在浏览器窗口尺寸变化时，页面样子还是这个样子。
其中：
Top, Bottom: 100%宽，根据内容自适应高;
Left, Right: 象素定宽
Center的宽度自适应（窗口宽度-Left宽度-Right宽度）的值
Left, Center, Right的高度要自适应（窗口高度-Top高度-Bottom高度）的值
其实就是Top永远在顶部，Bottom永远在底部，Left、Center、Right永远充满Top和Bottom之外的区域。
简单明了的说就是 设计一个布局，模拟一些类似的客户端应用的样子，比如Eclipse,Visio,VS等。
Top部分也许是放置主菜单和工具栏
Left和Right部分也许是放置一些辅助“窗口”
Bottom部分也许也是放辅助窗口，也许作为StatusBar
Center部分作为一个主要的工作空间，想放什么就放什么并且能滚动里面的内容。
另外有个问题还要请教，有关于那个什么box-model的问题
都说正确的box-model中width应该是除去border,padding等之后的宽度，
那么如果我有如下代码：
<div id= "parent " style= "width:100px;height:100px;border:2px solid red ">
<div id= "child " style= "width:100%;height:100%;border:2px solid green "> text </div>
</div>
我希望parent的尺寸不会自动发生变化，无论应该是100也好,96也好，不要自动变，就保持定义时的大小，
然后child的表现就是充满parent的可用区域，并且parent不出现滚动条，child的边框也全部可见。
这个需求在以前的IE中都不用考虑，以上
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
