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. zabbix使用介绍

    zabbix自定义监控项 1.创建主机组,可以根据redis.mysql.web等创建对于的主机组 2.创建主机 3.创建Screens 4.自定义监控项 zabbix_agentd.conf配置文件 ...

  2. magelinux notes

    [root@centos01 01]# cd ~jack #进入指定用户的家目录[root@centos01 jack]# cd - #切回上一次目录[root@centos01 home]# cd ...

  3. MySQL学习笔记——约束

    1.约束是在表上强制执行的数据检验规则,约束主要用于保证数据库的完整性. 2.当表中数据有相互依赖性时,可以保护相关的数据不被删除. 3.大部分数据库支持下面五类完整性约束: - NOT NULL非空 ...

  4. 虚拟机NUMA和内存KSM

    KSM技术可以合并相同的内存页,即使是不同的NUMA节点,如果需要关闭跨NUMA节点的内存合并,设置/sys/kernel/mm/ksm/merge_across_nodes参数为0.或者可以关闭特定 ...

  5. VBO, VAO, Generic Vertex Attribute

    VBO - 用于存储顶点数据的Buffer Object. VAO - 用于组织VBO的对象. Generic Vertex Attribute - 通用顶点属性. For example, the ...

  6. Node对象属性

    1.Node对象属性一            * nodeName             * nodeType            * nodeValue * 使用dom解析html时候,需要ht ...

  7. .NET安全审核检查表

    书籍名称:Web安全设计之道 -.NET代码安全,界面漏洞防范与程序优化   .NET安全审核检查表   检查项 任务描述 设计环节     Security descisions should no ...

  8. c#之Redis队列

    摘要 这两天一直在考虑redis队列:一个生产者,多个消费者的情况,这里弄了一个demo进行测试. 一个例子 关于如何引用Redisclient 可以参考之前的这篇文章:c#之Redis实践list, ...

  9. linux访问windows共享文件夹的方法

    博客转自:http://www.01happy.com/linux-access-windows-shares-folders/ 有时需要在linux下需要访问windows的共享文件夹,可以使用mo ...

  10. hdu4782 Beautiful Soup （模拟）

    http://acm.hdu.edu.cn/showproblem.php?pid=4782 2013成都区域赛全题PDF:http://acm.hdu.edu.cn/downloads/2013Ch ...