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. Django学习笔记之ORM字段和字段参数

    Object Relational Mapping(ORM) 一.ORM介绍 1. ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象 ...

  2. 写写Web API基础

    前两天突然心血来潮,对WEB Api 来了复习兴趣,虽然有很长时间没用了,现在有点迷湖.呀的!在VS2013的MVC项目(基于VS2012/MVC4的,如果是VS2013下的MVc5时,创建时勾上We ...

  3. wget指定目录下载以及其它的使用方式

    转自 http://java-er.com/blog/wget-useage-x/ 有时候我们需要wget一个文件下载到指定的目录下,或者重命名成指定的名字 wget -r -p -np -k -P ...

  4. openwrt设置uboot环境变量在flash上的存储地址

    1.分析如下 ubootenv_add_app_config ubootenv_add_uci_config "/dev/mtd1" "0x40000" &qu ...

  5. Commons Configuration之三Properties文件

    转载自(https://my.oschina.net/u/2000201/blog/486653) Properties文件是流行的应用程序配置文件.当然,Commons Configuration支 ...

  6. heartbeat 编译安装配置

    一.heartbeat介绍 heartbeat是HA高可用集群的一个重要组件,heartbeat实现了资源转移和心跳信息传递.它的常用组合方式为heartbeat v1,heartbeat v2+cr ...

  7. JVM 内存调优 与 实际案例

    堆内存设置 原理 JVM堆内存分为2块:Permanent Space 和 Heap Space. Permanent 即 持久代(Permanent Generation),主要存放的是Java类定 ...

  8. Memcache课程

    这套Memcache课程今天正式上线,http://www.yzmedu.com/course/53,总计6集,包括Memcache缓存技术和Memcache用户跨域技术,后面即将发布网上最全的微信小 ...

  9. ubuntu install git vim Plug manage

    在UBUNTU采用163或是阿里云来更新源,最新的更新源地址可以在网上查阅, 阿里源 deb http://mirrors.aliyun.com/ubuntu/ bionic main restric ...

  10. ctci4.1

     ;      )         ;     )         return false;     else         return true; }