特殊要求的 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中都不用考虑,以上代码的展现就是那样的,
可现在如果加了!DOCTYPE或者在FF中,完全不是那么回事,默认情况下IE中的parent会自动改变大小,
而在FF中,child和parent的边框在右边和下边甚至交叉在一起。。。。。
我怎么觉得还是IE以前的box-model正确呢?
如果IE以前的box-model是错误的,那么我这个需求可怎么实现呢?
我怎么觉得有些地方“标准”反而把问题搞复杂了?
多谢各位指教了。
[解决办法]
极度关注......