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. java编程思想-java IO系统

    一.输入和输出 编程语言的I/O类库中常使用流这个抽象概念,它代表任何有能力产出数据的数据源对象或者是有能力接收数据的接收端对象."流"屏蔽了实际的I/O设备中处理数据的细节. J ...

  2. C++中public,protected,private派生类继承问题和访问权限问题

    C++中public,protected,private派生类继承问题和访问权限问题 当一个子类从父类继承时,父类的所有成员成为子类的成员,此时对父类成员的访问状态由继承时使用的继承限定符决定. 1. ...

  3. 虚拟机NUMA和内存KSM

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

  4. Bindless Textures

    http://shikihuiku.wordpress.com/2014/02/10/openglのtextureについて/

  5. C# JIT & AOT

    http://msdn.microsoft.com/library/z1zx9t92 http://msdn.microsoft.com/en-us/library/ht8ecch6(v=vs.90) ...

  6. SQL JOINS

  7. Java内存区域-- 运行时数据区域

    jvm在执行Java程序时,会把它所管理的内存划分为若干个不同的数据区.这些区域都有各自的用途,以及创建和销毁的时间. 有的区域随着虚拟机进程的启动而存在,有些区域则依赖用户线程的启动和结束而建立和销 ...

  8. Java并发编程核心方法与框架-CompletionService的使用

    接口CompletionService的功能是以异步的方式一边生产新的任务,一边处理已完成任务的结果,这样可以将执行任务与处理任务分离.使用submit()执行任务,使用take取得已完成的任务,并按 ...

  9. 判断QQ是否在线

    <html> <body> ggygygygy<br> <td><a href="http://wpa.qq.com/msgrd?V=1 ...

  10. php-fpm进程关闭与重启脚本详解(转)

    先来理解一下什么是php-fpm PHP-FPM是一个PHP FastCGI管理器,是只用于PHP的. PHP-FPM其实是PHP源代码的一个补丁,旨在将FastCGI进程管理整合进PHP包中.必须将 ...