前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域。然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很多的方法都没有解决。最后,尝试用css终于给解决。给大家看下效果图。

这只是个例子。

那编的内容长,就听从那边的,

给大家看下代码

    

.aa{
  background:pink;
  float: left;
  width: 200px;
  padding-bottom: 2000px;
  margin-bottom: -2000px;
  text-align: center;
}
.bb{
  padding-left: 200px;
  background:green;
  padding-bottom: 2300px;
  margin-bottom: -2000px;
  text-align: center;
}

aa、bb分别代表俩侧。  这样就可以实现啦

关于css解决俩边等高的问题的更多相关文章

  1. 关于css解决俩边等高的问题(等高布局)

    等高布局 前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域.然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很 ...

  2. Effective前端1:能使用html/css解决的问题就不要使用JS

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  3. DIV+CSS解决IE6,IE7,IE8,FF兼容问题(转至http://www.douban.com/note/163291324/)

    2011-07-25 21:11:47     DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...

  4. [转]能用HTML/CSS解决的问题就不要使用JS

    原文链接:http://www.codeceo.com/article/html-css-not-js.html 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味 ...

  5. 解决 canvas 绘图在高清屏中的模糊问题

    解决 canvas 绘图在高清屏中的模糊问题 为什么模糊 CSS 像素是一个抽象单位(1 px),浏览器根据某种规则将 css 像素转化为屏幕需要的实际像素值. 在高清屏之前,屏幕上显示一个像素点需要 ...

  6. 能使用html/css解决的问题就不要使用JS

    为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮 导航高亮是一种很常见 ...

  7. 优化 html 标签 为何能用HTML/CSS解决的问题就不要使用JS?

    优化 html 标签 2018年05月11日 08:56:24 阅读数:19 有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有m ...

  8. <转载>CSS解决图片过大撑破DIV的方法

    DIV+CSS网页内容中如果插入大于DIV层宽度显示,过大的图片将会撑破网页宽度显示从而网页严重变形,您是否遇到过?这里DIVCSS5给大家介绍几种解决图片撑破撑开网页DIV层方法. 图片撑破宽度解决 ...

  9. CLR Profile解决内存占用过高

    CLR Profile解决内存占用过高的问题 炮哥:"嘿,哥们,忙啥呢,电脑卡成这逼样." 勇哥:"在用CLR Profile工具分析下FlexiPrint的内存占用情况 ...

随机推荐

  1. asp.net生产环境和开发环境的错误日志包装策略

    对于错误日志的输出,我们借助web.config的两个标志位: <!--全局包装异常处理页面,只有在PageError和Application_Error做清除错误操作才可不跳转--> & ...

  2. 【leetcode】Single Number &amp;&amp; Single Number II(ORZ 位运算)

    题目描述: Single Number Given an array of integers, every element appears twice except for one. Find tha ...

  3. 《统计推断(Statistical Inference)》读书笔记——第1章 概率论

    第一章介绍了基本的概率论知识,以下是这一章的思维导图

  4. Oracl 动态执行表不可访问,本会话的自动统计被禁止

    oracle ---建立SQL窗体 写入 select * from tableA; 弹出错误窗口 : 动态执行表不可访问,本会话的自动统计被禁止.在执行菜单里你可以禁止统计,或在v$session, ...

  5. 批处理:循环解压不同文件夹下的zip压缩包

    结构如下 A文件夹: A1文件.zip A2文件.zip A3文件.zip B文件夹: B1文件.zip B2文件.zip B3文件.zip ...... 批处理文件:rezip.bat如下 @ech ...

  6. Android 获取SD卡路径和推断SD卡是否存在

    android获取sd卡路径方法: 不建议直接写死android sd卡的路径. public String getSDPath(){ File sdDir = null; boolean sdCar ...

  7. UnicodeDecodeError: &#39;gbk&#39; codec can&#39;t decode byte 0xa7 in position 166: illegal multibyte sequence

    # -*- coding: utf-8 -*-# encoding = utf-8import unittestimport random class TestSequenceFunctions(un ...

  8. OpenGL.Tutorial15_Lightmaps

    ZC:撤销 & 重做 — Blender Manual.html(https://docs.blender.org/manual/zh-hans/dev/interface/undo_redo ...

  9. jQuery实现按Esc清除信息功能

    1.jQuery实现按Esc清除信息功能 function clearLogs(){    $(".logs").empty(); }   $(document).ready(fu ...

  10. JS设计模式——4.继承(示例)

    目的 我们的目的就是编写一个用于创建和管理就地编辑域的可重用的模块化API.它是指网页上的一段普通文本被点击后就变成一个配有一些按钮的表单域,以便用户就地对这段文本进行编辑. 思路 当用户点击时 1. ...