等高布局

前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是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. kafka+flume+HDFS日志采集项目框架

    1,项目图如下: 2, 实现过程 启动HDFS: sbin/start-dfs.sh 启动zookeeper(三台): bin/zkServer.sh start 启动kafka(三台): root@ ...

  2. 最适合初学者学习的idea教程

    https://github.com/judasn/IntelliJ-IDEA-Tutorial

  3. 【BZOJ1996】【HNOI2010】合唱队 [区间DP]

    合唱队 Time Limit: 4 Sec  Memory Limit: 64 MB[Submit][Status][Discuss] Description Input Output Sample ...

  4. codeforce C. Okabe and Boxes

    题目传送门 这道题 每次删除一个点 那么这个点必然在栈里面 那么如果堆顶不是他 我们就需要一次操作使得堆合理 这时我们可以把他删除然后把他下面的点打个标记表示这下面的点以后想怎么排就怎么排以后都不需要 ...

  5. 端到端测试,protractor测试的教程

    之前我们介绍了如何测试某段js代码的逻辑是否正确,考虑的情况是否全面,但是在ui界面上我们每次做好的功能都要自己去填写内容,点击按钮等,那么是否存在自动化测试的工具呢,让这些事情可以自动完成,答案是肯 ...

  6. selenium.common.exceptions.WebDriverException: Message: 'geckodriver' executable needs to be in PATH.

    http://www.seleniumhq.org/download   1. selenium 3.x开始,webdriver/firefox/webdriver.py的__init__中,exec ...

  7. 关于might_sleep的一点说明---CONFIG_DEBUG_ATOMIC_SLEEP【转】

    转自:http://blog.chinaunix.net/uid-23769728-id-3157536.html 这个函数我在看代码时基本上是直接忽略的(因为我知道它实际上不干什么事),不过因为内核 ...

  8. 哪些情况会导致OOM

    1. 堆溢出 java堆用于存储对象实例,只要不断地创建对象,并且这些对象不会被回收(什么情况对象不会被回收呢?如:由于GC Root到对象之间有可达路径,所以垃圾回收机制不会清除这些对象),那么,当 ...

  9. 【转】JSP自定义标签

    转载自:http://www.cnblogs.com/edwardlauxh/archive/2010/05/20/1918587.html tld标签的描述文件 标签的描述文件是一个描述整个标签库标 ...

  10. 记录一次lnmp故障报告

    业务架构图: nginx 状态监控图: 本次故障的表现为:前端php页面无法打开,空白页或者502错误. nginx中php配置如下: location ~ \.php$ { root /xxx/xx ...