收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2754|回复: 12

[求助] 两行布局,上边高固定,下边自适应

[复制链接]
发表于 2007-11-9 11:59:28 | 显示全部楼层 |阅读模式
如以下代码所示,如何在两行布局中,上边固定高度,而下边实现随浏览器的大小而自动适应,实现100%。

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

发表于 2007-11-9 12:25:11 | 显示全部楼层
高度自适应需要在css中加上 :

html {height:100%}

ps:似乎高度的计算上会有差别

[[i] 本帖最后由 maxreal 于 2007-11-9 12:26 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-11-9 12:29:08 | 显示全部楼层
给html加个overflow:hidden;height:100%

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

回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-9 14:34:06 | 显示全部楼层
楼上的给的不是真正的高度百分百,如果我要在container里再嵌一个相对于它百分百的DIV,那该怎么办呢?
如下面代码,当把里面的DIV设为100%时,相对的是整个屏幕的百分百,而我需要的是相对于container百分百。

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

回复 支持 反对

使用道具 举报

发表于 2007-11-9 14:44:41 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2007-11-9 16:59:31 | 显示全部楼层
html,body {height:100%;overflow:hidden;}
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-9 17:08:30 | 显示全部楼层
原帖由 [i]lzyy 于 2007-11-9 14:44 发表
可以参考这个页面
http://www.rexsong.com/blog/atta ... 405_height100_a.htm




不好意思,你给的地址链接无效,打不开页面
回复 支持 反对

使用道具 举报

发表于 2007-11-9 17:23:58 | 显示全部楼层
楼主,这是那个页面

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


[[i] 本帖最后由 门文化 于 2007-11-9 17:26 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-11-9 17:43:39 | 显示全部楼层
有一点迷惑,看来还是自已水平低,理解能力差
  1. #head { width:100%; text-align:center; background:#FF9400; height:100px; position:absolute; top:0;}
  2.         #head_height { height:100px;}
  3. #middle { margin:20px;}
  4. #foot { width:100%; text-align:center; background:#f00; height:100px; position:absolute; bottom:0;}
  5. * html #foot { bottom:-1px;}
  6.         #foot_height { height:100px;}
复制代码

以及后面的代码
  1. <div id="head" style=" line-height:100px; font-weight:bold;">head</div>
  2. <div id="head_height"></div>
  3. ...
  4. <div id="foot_height"></div>
  5. <div id="foot" style=" line-height:100px; font-weight:bold;">foot</div>
复制代码

显示结果是看到了,但不知为何要加_height,哪个大虾讲解一下!!!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-11 22:31:43 | 显示全部楼层
原帖由 [i]门文化 于 2007-11-9 17:23 发表
楼主,这是那个页面
[html]



自适应高度布局(宽度自适应) - FooterStick(width-100%) - RexSong.com



* { font-size:12px; font-family:Arial, Helvetica, sans-serif; }
html { height:100%;  ...




似乎这段代码也并没有达到我要的效果,我要的效果是上下两个DIV的布局,上面的header是固定高度,然后下面的content的高度是根据浏览器的变化而变化的, 本来这里可以通过设它的高度100%,然后用overflow:hidden来隐藏掉多余的部分,但是要在content里增加一个sidebar,而这个sidebar的高度是要相对于content的百分比来计算的,但如果是按照前面的做法,那么这个sidebar的百分比高度肯定是相对于浏览器的整个屏幕的,这就不是我所要的效果了.
样本图.gif

[[i] 本帖最后由 ssdu22 于 2007-11-11 22:41 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-11 22:34:37 | 显示全部楼层
简单点说,就是希望content可以实现真正的100%,相当于就是说header的高度可以不计算在内
回复 支持 反对

使用道具 举报

发表于 2007-11-12 09:07:32 | 显示全部楼层
原帖由 [i]门文化 于 2007-11-9 17:43 发表
有一点迷惑,看来还是自已水平低,理解能力差
#head { width:100%; text-align:center; background:#FF9400; height:100px; position:absolute; top:0;}
        #head_height { height:100px;}
#middle { margin:2 ...


你把这两个div先去掉

然后调整你显示器的高度! 看看效果
回复 支持 反对

使用道具 举报

发表于 2007-11-12 09:42:20 | 显示全部楼层
jnnvos大虾,我去掉两个div 了,效果是上面空了一大块白色部分
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2020-8-15 13:28 , Processed in 0.141243 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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