div结构如下：

<div class="mainbody">

　　<div class="left">导航</div>

　　<div class="right">内容</div>

</div>

让导航的高度根据内容层的高度自动调整的Css样式：

.mainbody{height:100%;overflow:hidden;}

.left{ height:100%;      margin-bottom:-99999px;     padding-bottom:99999px;}

这样就可以实现如题所说的功能了

左边的div导航根据右部div内容的高自动调整的更多相关文章

  1. CSS如何实现”右部宽度固定，左部自适应“的布局

    吃过晚饭后,开始刷前端笔试题,却遇到了一道CSS难题——使用CSS实现左部自适应.右部固定宽度为200px的布局.当时第一眼看到题目时,以为只是一道很简单的题目.不就是定义两个左浮动的div,右部的宽 ...

  2. 实现一个div，左边固定div宽度200px，右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  3. __x__(30)0908第五天__导航条的练习 <div>版本

    效果图:  html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...

  4. div+css实现的左右两个等高div

    工作当中我们经常会有这样的需求,尤其是在一些内容页面或者网站后台管理页面:左边的div的高度会随着右边的div的内容的增加儿增加,右边div的高度也会随着左边div的内容的增加而增加,也就是左右两侧两 ...

  5. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  6. DIV布局之道二：DIV块的嵌套，DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  7. xHTML+div布局：三个div,两边div宽度固定，中间div宽度自适应

    xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...

  8. html中div获取焦点，去掉input div等获取焦点时候的边框

    经测试只有在IE chrome才会在获取焦点时有边框 使用CSS div{ outline:none; } DIV焦点事件详解 --[focus和tabIndex]​ 摘自:http://my.osc ...

  9. js在一个div里面移动其子div

    var ChildDiv = $("#cid"); var width = 0; //鼠标点击子div的地方和子div的左边边距距离 var height = 0; //鼠标点击子 ...

随机推荐

  1. Python笔记 #02# Inner workings of lists

    源:DataCamp datacamp 的 DAILY PRACTICE  + 日常收集. List of lists Subset and conquer Slicing and dicing Li ...

  2. 有道云笔记配合MPic+七牛云 自制MarkDown文档图床(适用Typora)

    注:从有道云笔记v6.5开始,有道云笔记会员可以使用MarkDown有道自带的图床.(但是非会员可以采用下面的七牛云图床+MarkDown方法) 0x00 前言 一直用有道云笔记,粘贴图片,做笔记没问 ...

  3. 20145303 《Java程序设计》第六周学习总结

    20145303 <Java程序设计>第六周学习总结 教材学习内容总结 第十章:输入/输出 (InputStream与OutputStream) 1.Java将输入/输出抽象化为串流,数据 ...

  4. 20145329 《JAVA程序设计》实验三总结

    实验日期:2016.4.12 实验时间:15:30~17:30 实验序号:实验三 实验名称: 敏捷开发与XP实践 实验目的与要求: XP基础 XP核心实践 相关工具 实验内容 1.使用git托管代码 ...

  5. MR案例：外连接代码实现

    [外连接]是在[内连接]的基础上稍微修改即可.具体HQL语句详见Hive查询Join package join.map; import java.io.IOException; import java ...

  6. [ARC061E]すぬけ君の地下鉄旅行 / Snuke's Subway Trip

    题目大意:Snuke的城镇有地铁行驶,地铁线路图包括$N$个站点和$M$个地铁线.站点被从$1$到$N$的整数所标记,每条线路被一个公司所拥有,并且每个公司用彼此不同的整数来表示. 第$i$条线路($ ...

  7. Apache ab 测试结果的分析

    以前安装好APACHE总是不知道该如何测试APACHE的性能,现在总算找到一个测试工具了.就是APACHE自带的测试工具AB(apache benchmark).在APACHE的bin目录下.格式: ...

  8. What is OWIN? A Beginners Guide

    http://www.codedigest.com/posts/1/what-is-owin-a-beginners-guide http://owin.org/html/spec/owin-1.0. ...

  9. linux（一）export的生命周期

    本文从shell执行的角度分析export变量的生命周期 # 只对当前shell环境起作用,比如通过不同的远程ssh就是不同的shell环境 export k=v 当运行一个.sh文件或者是shell ...

  10. SpringMVC两种处理器适配器

    1.实现Controller接口的处理器适配器 package com.xiaostudy; import javax.servlet.http.HttpServletRequest; import ...