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

caobaohua · 发表于 2009-6-17 10:50:57

由头：bs的页面。程序已经做完。.net做的。程序员门写的aspx页面里面乱七八糟。全都是table 和  哎，这些暂时放下。框架的样子我已经做完，如图。default.aspx里面还是用freamset划分的。
问题：1、在右边大圆框框，其实就是 main.aspx这个页面。他自己要满足：这个框框一直自适应页面大小（适合不同分辨率）
2、高了或宽了，都能自动将整个框框撑大。（其实不应该开撑大，滚动条应该在内部。可以给内部的内容外面套一个pannel,让他自己出滚动条。关键就是这个pannel的高和宽怎么定。）
现在：这个框框自适应页面大小我做了个假的，用背景图。左边一张图。页面背景一张图。最上面盖两张。

难题：现在中间的内容高了或宽了。边框不会变大。可否有自适应宽高的一个pannel ，分辨率变化，这个pannel的宽会变化。即便内部的内容超出了一屏。这样滚动条也在框框内部。

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

HTML { height:100%; overflow:auto;}
BODY { height:100%; overflow:auto; background:url(../images/html_bg.jpg) no-repeat right bottom;}
.SIDE { position:absolute; left:0px; top:0px; bottom:0px; width:32px; overflow:hidden; background:url(../images/border_left.png) no-repeat left bottom;}
HTML { *padding:0px;}
.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;}
#MAINTB{ BACKGROUND:url(../images/main_top_b.png) no-repeat left top; HEIGHT:4px; POSITION:absolute; TOP:0px; LEFT:0px; RIGHT:0px;}
/*ie6*/
#MAINTB{ *BACKGROUND:url(../images/main_top_b.png) no-repeat left top; POSITION:absolute; TOP:0px; *WIDTH:100%;}
#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 编辑 ]

caobaohua · 发表于 2009-6-17 11:41:17

http://bbs.blueidea.com/thread-2928157-1-2.html
http://bbs.blueidea.com/viewthre ... p;extra=&page=1
我都早已经拜读过了。
但是这个圆角图效果自适应高的实在没什么头绪。而且在底部的这张背景图是有渐变的。哎，我自己设计的，自作孽啊。
继续考虑中，希望大家能有其他的想法。

14px · 发表于 2009-6-17 15:58:34

建议你把它当成最基本的圆角问题进行单独处理。
这里给你一个自适应高度的圆角方法参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title>高度自适应窗口的圆角</title>
<style type="text/css">
* { margin:0; padding:0;}
html,body { height:100%; overflow:hidden;}
.box { height:100%; width:600px; margin:0 auto;}
.content { height:100%; border-left:1px solid #6586b0; border-right:1px solid #6586b0;}
.filletTop,
.filletBottom,
.filletTop div,
.filletBottom div { background:url(http://bbs.blueidea.com/attachment.php?aid=120634&k=d058df1dbf954cf171a7e2f92d21a219&t=1245225624&noupdate=yes&nothumb=yes) no-repeat; height:4px; overflow:hidden;}
.filletTop div { margin-left:4px; background-position:right top;}
.filletBottom { background-position:left -4px;}
.filletBottom div { margin-left:4px;  background-position:right -4px;}
.filletTop { margin-bottom:-4px; position:relative;}
.filletBottom { margin-top:-4px; position:relative;}
</style>
</head>
<body>

</body>
</html>

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

[[i] 本帖最后由 14px 于 2009-6-17 16:04 编辑 ]

birdstudio · 发表于 2009-6-17 16:24:01

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

14px · 发表于 2009-6-17 17:46:04

底边如果很高的话那确实没什么办法了，只能把它当作模拟的框架部分出现了。
LZ传的只是缩图，也不知道底下那一段空白的是需要的还是不需要的。
如果可能，还是尽量把圆角和主内容区域一起控制比较好。
- -! 顺便说一下，既然你自己设计的，还可以把设计稿改一改...

caobaohua · 发表于 2009-6-18 09:58:30

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

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

caobaohua · 发表于 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

帐号		自动登录	找回密码
密码			注册

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

回复 3# 14px 的帖子

回复 4# birdstudio 的帖子