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. Greatest Common Increasing Subsequence

    /*HDU1423 最长公共递增*/ #include <stdio.h> #include <string.h> #include <iostream> usin ...

  2. Spring七大框架

    Spring Core:最基础部分,提供IOC和依赖注入.基础概念是BeanFactory,提供对Factory模式的经典实现,这样来消除对程序性单例模式的需要,并真正地允许你从程序逻辑中分离出依赖关 ...

  3. 20145301Java课程总结

    20145301 Java课程总结 每周读书笔记链接汇总 第一周读书笔记: http://www.cnblogs.com/5301z/p/5248888.html 第二周读书笔记: http://ww ...

  4. 20145303刘俊谦 《Java程序设计》实验四 实验报告

    实验要求 完成实验.撰写实验报告,实验报告以博客方式发表在博客园,注意实验报告重点是运行结果,遇到的问题(工具查找,安装,使用,程序的编辑,调试,运行等).解决办法(空洞的方法如"查网络&q ...

  5. 20145333 《Java程序设计》第二次实验报告

    2014333 <Java程序设计>第二次实验报告 课程:Java程序设计 指导教师:娄嘉鹏 实验日期:2016.04.12 实验名称:Java面向对象程序设计 实验内容 初步掌握单元测试 ...

  6. apache——(OS 10048)通常每个套接字地址(协议/网络地址/端口)只允许使用一次。 : AH00072: make_sock: could not bind to address [::]:443

    问题:命令行运行httpd.exe时报错 (OS 10048)通常每个套接字地址(协议/网络地址/端口)只允许使用一次.  : AH00072: make_sock: could not bind t ...

  7. POJ 2299 Ultra-QuickSort（树状数组+离散化）

    http://poj.org/problem?id=2299 题意:给出一组数,求逆序对. 思路: 这道题可以用树状数组解决,但是在此之前,需要对数据进行一下预处理. 这道题目的数据可以大到999,9 ...

  8. jni使用问题总结

    参考: https://blog.csdn.net/fred_lzy/article/details/53159138 https://blog.csdn.net/avi3/article/detai ...

  9. Matlab 实现对码功能

    1.什么叫对码? 举例说明,数据库中有两张表. 表 1: 编号 描述 儿科门诊 妇科门诊 产科门诊 表 2: 编号 描述 儿科门诊 妇科门诊 产科门诊 现在要在表 1 和表 2 之间找到一一对应.比如 ...

  10. PHP libevent函数基本介绍

    3.2   主要函数介绍 按照使用libevnet库顺序,看一下相关函数做什么操作. 3.2.1  event_init 调用event_base_new,初始化struct event_base对象 ...