找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2813|回复: 6

【讨论】B/S自适应浏览器宽高

[复制链接]
发表于 2009-6-17 10:50:57 | 显示全部楼层 |阅读模式
由头:bs的页面。程序已经做完。.net做的。程序员门写的aspx页面里面乱七八糟。全都是table 和  哎, 这些暂时放下。框架的样子我已经做完,如图。default.aspx里面还是用freamset划分的。
问题:1、在右边大圆框框,其实就是 main.aspx这个页面。他自己要满足:这个框框一直自适应 页面大小(适合不同分辨率)
           2、高了或宽了,都能自动将整个框框撑大。(其实不应该开撑大,滚动条应该在内部。可以给内部的内容外面套一个pannel,让他自己出滚动条。关键就是这个pannel的高和宽怎么定。)
现在:这个框框自适应页面大小我做了个假的,用背景图。左边一张图。页面背景一张图。最上面盖两张。
bg.gif
难题:现在中间的内容高了或宽了。边框不会变大。可否有自适应宽 高的一个pannel ,分辨率变化,这个pannel的宽会变化。即便内部的内容超出了一屏。这样滚动条也在框框内部。

借鉴文章:
div仿框架方法详解:http://www.blueidea.com/tech/web/2009/6716_4.asp

  1. HTML { height:100%; overflow:auto;}
  2. BODY { height:100%; overflow:auto; background:url(../images/html_bg.jpg) no-repeat right bottom;}
  3. .SIDE { position:absolute; left:0px; top:0px; bottom:0px; width:32px; overflow:hidden; background:url(../images/border_left.png) no-repeat left bottom;}
  4. HTML { *padding:0px;}
  5. .SIDE { *height:100%; *float:left; *width:32px; *position:relative; *top:0; *right:0; *bottom:0; *left:0; background:url(../images/border_left.png) no-repeat left bottom;}
  6. #MAINTB{ BACKGROUND:url(../images/main_top_b.png) no-repeat left top; HEIGHT:4px; POSITION:absolute; TOP:0px; LEFT:0px; RIGHT:0px;}
  7. /*ie6*/
  8. #MAINTB{ *BACKGROUND:url(../images/main_top_b.png) no-repeat left top; POSITION:absolute; TOP:0px; *WIDTH:100%;}
  9. #MAINTBR{ BACKGROUND:url(../images/main_top_b.png) no-repeat right top; HEIGHT:4px; WIDTH:32px; POSITION:absolute; RIGHT:1px; TOP:0;}
复制代码


写完这个问题之后我就头大,一句话,有没有自适应浏览器宽高的 圆角图框 的css。

[[i] 本帖最后由 caobaohua 于 2009-6-17 10:55 编辑 ]
 楼主| 发表于 2009-6-17 11:41:17 | 显示全部楼层
http://bbs.blueidea.com/thread-2928157-1-2.html
http://bbs.blueidea.com/viewthre ... p;extra=&page=1
我都早已经拜读过了。
但是这个圆角图效果自适应高的实在没什么头绪。而且在底部的这张背景图是有渐变的。哎,我自己设计的,自作孽啊。
继续考虑中,希望大家能有其他的想法。
回复 支持 反对

使用道具 举报

发表于 2009-6-17 15:58:34 | 显示全部楼层
建议你把它当成最基本的圆角问题进行单独处理。
这里给你一个自适应高度的圆角方法参考。

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 14px 于 2009-6-17 16:04 编辑 ]
1.gif
回复 支持 反对

使用道具 举报

发表于 2009-6-17 16:24:01 | 显示全部楼层

回复 3# 14px 的帖子

恐怕还是要用 CSS 仿框架来做这个单独的右下的圆角框,因为它在框架内,也就是说它是一个单独的页面。最厉害的地方就是楼主需要在圆角框的内部出现滚动条,而不是圆角框的外部。
回复 支持 反对

使用道具 举报

发表于 2009-6-17 17:46:04 | 显示全部楼层
底边如果很高的话那确实没什么办法了,只能把它当作模拟的框架部分出现了。
LZ传的只是缩图,也不知道底下那一段空白的是需要的还是不需要的。
如果可能,还是尽量把圆角和主内容区域一起控制比较好。
- -! 顺便说一下,既然你自己设计的,还可以把设计稿改一改...
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-18 09:58:30 | 显示全部楼层

回复 4# birdstudio 的帖子

我应该一起提两个问题才对。
第一:其实就是想要 针对一个独立的 网页。它里面有个大框框。这个框框。自适应浏览器。而且里面东西多了。他会跟着变大。页面的滚动条会出来。
这个的难点是,当它被 ifream 或者 freamset 调用进来后。内容肯定会多。我也赞同“滚动条在内容部”的原则。所以涉及到了问问题二。
第二:需要一个 div 或者别的什么吧。他要一直适应浏览器的宽和高。 因为他有了宽高。“内部滚动条”就在他上面出现。

版主 的意思我明白。应该把框框 和div 做成一个东西。即自适应浏览器,又根据内容可以撑开。根据内容能撑开,就成了页面的滚动条了。
只要第二个问题解决了。就都好办了。不知道这个是css实现。还是js。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-6-18 10:30:54 | 显示全部楼层
b/s  这个东西大致上有两种内容的东西。一类是填表的。一类是gridview的。
填表的和咱现实生活的表格差不多。不会宽只会长。
gridview的页面 就又宽又长。肯定要出滚动条。
滚动条:超了才出。 但是你要有个基础数值吧。要不怎么知道是超了呢?

我小有觉悟。
方法1:根据 div仿框架方法详解:http://www.blueidea.com/tech/web/2009/6716_4.asp  把外面的这个框框。分成4份。比“div仿框架方法详解”多出一个right来。内部再调一个ifream。 最后再套进freamset里面来。不知道能不能行。但是从这个思路上。我就已经感觉麻烦的要死。

问高手们个问题:这个freamset 或ifream。是怎么回事?我的理解是。一个固定大小的镜头。被调页面 包括在此镜头大小里面的东西被直接看到,超出此镜头大小的东西,你拖动fream的滚动条才能看到。是这样吗?but!!! 我在被调页面上面写的height=100%的 side的 div 为什么进入到 fream后 只按照fream这个镜头的高度去100%。该死的他不是应该跟着他自己主子:自身所在的页面的高走吗?
xx 的ie
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-4-11 02:59 , Processed in 0.063792 second(s), 12 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表