1、如何实现页面的宽高自适应浏览器的变化，且有一个最小宽和高

 <head>
     <meta charset = "utf-8">
     <title>个人任务管理系统</title>　　　　<style>　　　　　　body {width: 100%; height 100%; min-width: 800px; min-height: 500px;}　　　　　　header {height: 50px;}　　　　　　#container {min-height: 450px; position: absolute; top: 50px;　　　　　　　　 bottom: 0;}　　　　　　#right {min-width: 800px; width 100%; height: 100%; float: left; 　　　　　　　　　　　　padding-left: 400px; box-sizing: border-box; }　　　　　　#left {width: 400px; height 100%; flaot: left; box-sizing: border-box; 　　　　　　　　　　　　margin-left: -100%;}　　　　</style>
 </head>
 <body>

     <header>
         header
     </header>

     <div id="container">
         <div id="right">right</div>
         <div id="left">left</div>
     </div>

 </body>
 </html>

　　难点一：就是header部分是固定高度，如果不是固定高度，可采用百分比，实现过程就这么复杂了。采用百分比的问题是当浏览器很高时，header部分也太高了。

　　难点二：container部分采用绝对布局方式空出了header占用的空间，这时他的高度想要跟随浏览器的高度，不能采用百分比的方法了，因为你不知道该值是多少，这里巧妙地采用了bottom的值为0的技巧，使得container的高度充满了浏览器，同时要设置好最低高度。要不然，但浏览器高度过低时，底部布局出现问题。

　　难点三：left和right部分的布局看起来是常见的一列固定(left)，一列自适应(right)的布局。但是这里他们的父元素，也就是它们的包含块没有确定的宽度值。这里的解决办法是采用了margin为负值的技巧，并且要设置right部分的最小宽度值。要不然，但浏览器变窄时，右边会留空白，出问题。

实现百度IFE2015Spring的任务Task3的几个问题和解决办法的更多相关文章

  1. 百度地图api的覆盖物样式与bootstrap样式冲突解决办法

    使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧 宽度变得非常窄 正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...

  2. 关于 WebBrowser调用百度地图API 鼠标滚轮缩放地图级别失灵的解决办法

    在桌面程序下 百度地图API的鼠标缩放地图功能可能会失灵无效! 这个原因不是API的问题 小弟试了下在WEB上面是没有问题的 于是考虑可能是WebBrowser的获取焦点问题,于是在主窗体 添加了一个 ...

  3. 百度云管家使用socks代理无法上传下载解决办法

    像前几篇随笔描述的那样,笔者在学校里通过shadowsocks使用ipv6访问双栈vps来免费使用外网,但是在设置百度云管家的代理时发现:使用socks代理客户端可以访问文件列表,但是无法上传下载. ...

  4. 百度编辑器ueditor每次编辑后多一个空行的解决办法

    用ueditor进行编辑文章时,每次编辑后文章前面都会多出一个空行. <script id="editor" type="text/plain" styl ...

  5. 百度编辑器ueditor插入表格没有边框,没有颜色的解决方法 2015-01-06 09:24 98人阅读 评论(0) 收藏

    百度富文本编辑器..很强大.. - - ,不过有些BUG..真的很无解.. 最近用这个,发现上传的表格全部没有表框.. 解决办法如下: 转载的.. 百度编辑器ueditor插入一个表格后,在编辑过程中 ...

  6. 百度地图API 与 jquery 同时使用时报 TypeError $(...) is null错误 失效的原因及解决办法

    在引用百度地图API后,发现jquery 根据id 找不到 form.但是对于别的控件没有问题. 在排除了 html加载的问题后. 上网查找 发现以下解决办法: 原因应该是有冲突的插件. 解决办法将 ...

  7. 对于MVC中应用百度富文本编辑器问题的解决办法

    1.对于应用富文本编辑器post提交表单内容提示有危险的解决办法: [ValidateInput(false)] //文本编辑器的表单提交不用提示危险 [HttpPost] public Action ...

  8. IOS8下，百度地图无法定位解决办法

      通过在论坛中搜索,找到解决办法,我只是论坛的搬运工.分享如下:   1.在info.plist中加入: NSLocationAlwaysUsageDescription＝YES NSLocatio ...

  9. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...

随机推荐

  1. 在不同的pyhon版本中切换

    issue discription 在一台电脑上同时安装了python2.7和python3.5,怎样在这两个版本中切换调用? solution to the issue 进入python安装文件夹, ...

  2. Zookeeper集群的安装和使用

    Apache Zookeeper 由 Apache Hadoop 的 Zookeeper 子项目发展而来,现已经成为 Apache 的顶级项目,它是一个开放源码的分布式应用程序协调服务,是Google ...

  3. Ajax本地跨域问题 Cross origin requests are only supported for HTTP

    问题:打开本地html文件时,报错如下 Cross origin requests are only supported for protocol schemes: http, data,chrome ...

  4. 2014-10-2 bug更新5 ecshop和ectouch解决动态ip登录超时和购物车清空问题

    有客户说登陆网站后台操作的时候,会时不时的掉一下,要重新登陆才能继续操作,自动登出的频率快和时间短,针对这个问题是因为: 购物车问题原因的产生是因为动态IP的SESSEION机制导致很多在公司或者其他 ...

  5. new和alloc init的区别

    背景说明,new是较为老式的写法,后来发现只有一个new不好使,才引入了alloc和init这种写 法,保留new一是向后兼容,二是很多时候是一种更简单的写法.其实是一样的,new在内部调用 的all ...

  6. 修改美化Matlab字体

    修改美化Matlab字体    MATLAB作为高校理工科类本科生或研究生必不可少的科研工具已经有着很多年的历史,以至于在我们的大学生活里或科研工作中,MATLAB处处闪现着它的身影,给我们带来了不少 ...

  7. HTML5播放器实例

    鉴于html5Audio and video的使用,设计了一个自定义风格的播放器,除实现一些基本的默认功能之外,还实现了一些高级功能. 具体功能如下: 实现播放暂停按钮 实现静音按钮 实现音量调节滑动 ...

  8. Struts 中 ActionContext ctx.put()把数据放到ValueStack里之数据传输背后机制：ValueStack(值栈)

    1.     数据传输背后机制:ValueStack(值栈) 在这一切的背后,是因为有了ValueStack(值栈)! ValueStack基础:OGNL要了解ValueStack,必须先理解OGNL ...

  9. zabbix安装全过程

    在了解<zabbix硬件.软件需求>之后,在你心里应该有备选的机器.今天开始安装zabbix.zabbix需要LNMP或者LAMP环境.环境的搭建不在本章范围内. LNMP环境配置Linu ...

  10. JDBC连接池

    650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/45/0C/wKiom1PjixLxfknCAAEbp-e9Bq ...