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. UVA11178 Morley's Theorem(基础模板)

    题目链接 题意:给出A,B, C点坐标求D,E,F坐标,其中每个角都被均等分成三份   求出 ABC的角a, 由 BC 逆时针旋转 a/3 得到BD,然后 求出 ACB 的角a2, 然后 由 BC顺时 ...

  2. HTML 速查列表

    HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head& ...

  3. mybatis的批量删除

    公司工程用的是Mybatis的example的类,自动生成了对数据库的操作,批量操作的今天用到了,两种方式,一种需要拓展它生成的类,另一种自带的. 批量删除的id是以集合List传递 id以List& ...

  4. MYSQL数据库的常用数据类型

    列类型 说明 tinyint/smallint/mediumint int(integer)/bigint 1字节.2字节.3字节.4字节.8字节整数,又可分有符号和无符号两种.这些整数类型的区别仅仅 ...

  5. Ubuntu——"xxx is not in the sudoers file.This incident will be reported" 错误解决方法

    Ubuntu下普通用户用sudo执行命令时报如题所示错误,解决方法就是在/etc/sudoers文件里给该用户添加权限.如下: 1.切换到root用户下 2./etc/sudoers文件默认是只读的, ...

  6. 总结CSS面试题目的考察点及常见布局问题整理

    整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...

  7. PHP mysqli 扩展库(面向对象/数据库操作封装/事务控制/预编译)

    1.和mysql扩展库的区别: (1   安全性.稳定性更高 (2  提供了面向对象和面向过程两种风格 2.php.ini  中的  extension=php_mysqli.dll 解除封印 3.面 ...

  8. PHP代码质量优化

    最近总结了一些平常写PHP代码时的一些优化分享给大家. 1.尽量使用绝对路径 相对路径中会检查很多路径,这时我们可以使用绝对路径,但绝对路径不利于后期维护,所以define定义的时候使用__FILE_ ...

  9. EF批量插入 扩展

    https://efbulkinsert.codeplex.com/ https://github.com/loresoft/EntityFramework.Extended

  10. 百度文件上传webuploader上传文件，含文件大小、类型验证

    你的上传初始化文件upload_XXX.js中:(见红色字) // 初始化Web Uploader var allMaxSize = 10; var uploader = WebUploader.cr ...