等高布局

前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是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. CSS - 解决使用浮动,父窗体不能撑高问题

    浮动的父级元素一定要用 clear 清除浮动,否则高度会无法撑开.

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

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

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

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

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

  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. 用CSS解决一个让人头疼的问题

    需求:下面的文字内容分别都写在一个a标签里,现在需要获取到每一行最后一个a标签的竖线,并删除  我首先想到的是用CSS3新增选择器—— :nth-child()来解决,比如 :nth-child(3n ...

随机推荐

  1. MyBatis+Spring实现基本CRUD操作

    一.MyBaits介绍   MyBatis 是一个可以自定义SQL.存储过程和高级映射的持久层框架.MyBatis 摒除了大部分的JDBC代码.手工设置参数和结果集重获.MyBatis 只使用简单的X ...

  2. mavne问题解决---Dynamic Web Module 2.3 or newer

    一:前沿 maven问题的bug,其实是很烦人的,因为每次都是很纠结的去改这个bug,特别的烦人,这个bug也是使得我纠结了好久的,那个星期五自己搞了几个小时都没有解决下,之后星期一来百度Google ...

  3. 图论:Stoer-Wagner算法

    利用Stoer-Wagner算法求无向图最小割 直接给出算法描述和过程实现: 算法步骤: . 设最小割cut=INF, 任选一个点s到集合A中, 定义W(A, p)为A中的所有点到A外一点p的权总和. ...

  4. 【CF1027D】Mouse Hunt(拓扑排序,环)

    题意:给定n个房间,有一只老鼠可能从其中的任意一个出现, 在第i个房间设置捕鼠夹的代价是a[i],若老鼠当前在i号房间则下一秒会移动到b[i]号, 问一定能抓住老鼠的最小的总代价 n<=2e5, ...

  5. Nginx的主要配置参数说明

    #定义Nginx运行的用户和用户组user www www; #nginx进程数,建议设置为等于CPU总核心数.worker_processes 8; #全局错误日志定义类型,[ debug | in ...

  6. HDU1248 (完全背包简单变形)

    寒冰王座 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  7. Perl的Expect模块学习

    Perl的Expect模块学习 http://www.xuebuyuan.com/1852717.html

  8. 【bzoj2561】最小生成树

    嗯……这题是一个网络流. 加入的边为u,v长度L 则所有长度大于L的边不能使得u,v连通 求个最小割即可.小于同理 两次最小割结果相加. #include<bits/stdc++.h> # ...

  9. 操作MySQL数据库相关代码

    注意事项: 1.导入驱动包,如我导的是mysql-connector-java-5.1.26-bin.jar 2.修改下面代码中的用户名和密码 3.其中URL为"jdbc:mysql://数 ...

  10. 厦门大学XMUNET+ ubuntu连接方法

    编辑连接 输入用户名和密码就好了 ubuntu16.04