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. 理解和使用 JavaScript 中的回调函数

    理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报  分类: JavaScript(4)    目录( ...

  2. js023-离线应用与客户端存储

    js023-离线应用与客户端存储 本章内容: 进行离线检测 使用离线缓存 在浏览器中保存数据 23.1 离线检测 第一步:知道设备是在线还是离线:navigator.Online属性.该值为true表 ...

  3. aircrack-ng test

    Aircrack-ng工具包有很多工具,我用到的工具主要有以下几个: airmon-ng 处理网卡工作模式 airodump-ng 抓包 aircrack-ng 破解 aireplay-ng 发包,干 ...

  4. dos命令复制当天生成的以日期为文件名的文件

    1.利用SqlServer的自动备份功能,将数据自动备份,备份出的文件格式如下:             db_backup_201001270930.bak 2.编辑bat脚本            ...

  5. CSS学习笔记——响应式布局

    响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...

  6. Android学习笔记——menu

    该工程的功能是实现两个数相乘,并在另外一个Activity中显示计算的结果 以下的代码是MainActivity.java中的代码 package com.example.menu; import a ...

  7. 关于敏捷开发方法(Agile Software Development)的阅读笔记

    对“敏捷开发”(Agile Software Development)这个词,我是在这学期邹欣老师<现代程序设计>课上第一次听到的,刚听到时并不知道其具体指什么,只是从字面上直觉其意思应该 ...

  8. Windows Platform Predefined Macros

    https://msdn.microsoft.com/en-us/library/b0084kay.aspx

  9. CentOS 7 AMD64安装nginx和mysql

    NGINX: rpm -ivh http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.8.0-1.el7.ngx.x86_64.rpm 查看: ...

  10. RHEL-界面中文乱码问题

    一.虚拟机里的rhel更换为中文简体后,中文字符变为小方块 二.解决方法: 安装中文支持的软件包 fonts-chinese-3.02-12.el5.noarch.rpm fonts-ISO8859- ...