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. Autowire

    Field userService in com.demo.web.Controller.HomeController required a single bean, but 2 were found ...

  2. logstash运输器以及kibana的更多操作

    为了达到不会因为ELK中的某一项组件因为故障而导致整个ELK工作出问题,于是 将logstash收集到的数据存入到消息队列中如redis,rabbitMQ,activeMQ或者kafka,这里以red ...

  3. $(document).ready(function(){})和$(window).load(function(){})的区别

    页面加载完成有两种状态: 1.Ready:表示文档结构已经加载完成,不包含图片等非文字媒体文件,在Dom节点创建完成后执行,如果有多个定义则依次执行 $(document).ready(functio ...

  4. java处理json的工具类(list,map和json的之间的转换)

    需要下载第三方的jar :net.sf.json import java.io.BufferedReader; import java.io.InputStream; import java.io.I ...

  5. Mybatis <if>标签使用注意事项

    在<if>标签的test中,不能写成“name !='aa'” , 会报错### Error querying database. Cause: java.lang.NumberForma ...

  6. Css初步认识

    css 美化页面 cascading style sheet 层叠样式表 css语法:  选择器{ css属性名:属性值;css属性名:属性值;} css引入方式:  方式一:内联样式表   通过标签 ...

  7. hadoop项目实战--ETL--（一）项目分析

    项目描述 一 项目简介 在远程服务器上的数据库中有两张表,user 和order,现需要对表中的数据做分析,将分析后的结果再存到mysql中.两张表的结构如下图所示 现需要分析每一天user和,ode ...

  8. Java实习一

    简单的二元一次方程求解 import java.lang.Math; import java.util.Scanner; public class Solve{ public static void ...

  9. 01_MapReduce流程总结

    1. MapReduce整体流程 1. 每个map,reduce都作为1个独立进程process启动(多进程并发方式,spark是多线程并发) 2. 由于进程空间独享,因此方便控制每个map, red ...

  10. 可以，得驾证了\(^o^)/

    说实在话,我自认为我不太适合开车. 首先我有点晕车,在车上坐久了就头晕脑胀. 心里素质也不行,凡是遇到什么事了,就慌慌张张,手忙脚乱. 然后就是练车一点都不稳,每次练车都会有新问题出现. 先说一下我科 ...