关于css解决俩边等高的问题

前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是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分别代表俩侧。  这样就可以实现啦

时间: 2024-08-28 15:03:23

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

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

  借用Effective之名,开始写Effective系列,总结一些前端的心得. 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮 导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮.你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS. 在正常态时,每个导航的默认样式为: 正常态透明度为0.5 CSS 1 2 3 n

能用HTML/CSS解决的问题就不要使用JS!

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮 导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮.你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS. 在正常态时,每个导航的默认样式为: nav li{    opacity: 0.5;} 当前页面的导航透明度为1. 为了实现这个目的: 首先通过body给不同的页面

DIV+CSS解决IE6,IE7,IE8,FF兼容问题

DIV+CSS解决IE6,IE7,IE8,FF兼容问题1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/> 2. 2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如margin-left:10px!

css解决td单元格内文字溢出

td单元格内显示的文字太长时,总是会自动分行,把表格撑高了,或者密密麻麻的一片,总是不好看~ 俺一开始的做法是用php的mb_substr()来截取定长的字符串,但是,因为中英文字节的差异,比如,10个中文字符就比10个英文字符要长得多,在网页上显示起来就忽长忽短,无法对齐,很不美观~ ~解决办法~ 第一步:<table>标签加样式:style="table-layout:fixed;"(一定要加,否则下面定义的td的样式都不起作用了) 第二步:<td>加样式:

为何能用HTML/CSS解决的大发彩票源码下载问题就不要使用JS?

为什么大发彩票源码下载Q1446595067 论坛:haozbbs.com说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例.1.导航高亮 导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮.你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS. 640?wx_fmt=png&wxfrom=5&wx_lazy=1 640?wx_fmt=pn

&lt;转载&gt;CSS解决图片过大撑破DIV的方法

DIV+CSS网页内容中如果插入大于DIV层宽度显示,过大的图片将会撑破网页宽度显示从而网页严重变形,您是否遇到过?这里DIVCSS5给大家介绍几种解决图片撑破撑开网页DIV层方法. 图片撑破宽度解决方法.CSS设置div层宽度图片大于设置div宽度后撑破div固定宽度解决方法方案,隐藏图片超出撑破宽度方法. 一.防止图片撑破DIV方法一 原始处理方法是将要展示的图片进行处理.比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪

CSS解决无空格太长的字母,数字不会自动换行的问题

其实很简单,代码如下所示,注意 Style: <div class="detail_title" style="word-break: break-all;"><%=StringUtil.toHTML(title) %></div> 默认情况下,一个 DIV或者其他元素的文本,如果都是无文字分隔符,无空格,则不会自动换行,比如: <div class="detail_title" style="

CLR Profile解决内存占用过高

CLR Profile解决内存占用过高的问题 炮哥:"嘿,哥们,忙啥呢,电脑卡成这逼样." 勇哥:"在用CLR Profile工具分析下FlexiPrint的内存占用情况." 炮哥:“哎哟,不错啊,玩高级的了.” 勇哥:“也没有啊,就是发现点击查询按钮查询数据时,如果数据量一大的话,内存上上升了好几个M,所以第一感觉就不太正常.正好以前也了解过CLR Profile,但一直没怎么具休的用过,这次正好拿来研究研究.” 炮哥:“Nice job,要向你学习,能够主动发现

css如何实现未知宽高div中图片垂直水平居中效果

css如何实现未知宽高div中图片垂直水平居中效果:在有时候可能有这样的情况,那就是想让一个图片在div中实现垂直水平居中效果,但是有时候div的尺寸是位置的,下面通过代码实例介绍一下在这种情况下如何实现图片的垂直水平居中效果.代码如下:实例一: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&q