解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题
/*左侧div*/
.left-div{width: 220px;height: 100%;position: fixed;background: #FFFFFF;}
/*右侧div*/
.right-div{top: 0px; bottom:0px;left:220px;right:0px;position: fixed;background: #000000;}
解决思路就是将左侧的div的高度和宽度设置好,然后右侧div只需要设置top,bottom,left,right这四个属性就可以解决这个问题了。
解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题的更多相关文章
- css实现两个div并排等高(一个div高度随另一个高度变化而变化)
方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box;
- 如何让两个div在同一行显示?一个float搞定
最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...
- Flex 布局 (两个div居中自适应 宽度变小变一列,宽度够就是两列)
https://www.runoob.com/w3cnote/flex-grammar.html display: flex; justify-content: center; align-items ...
- css布局之两列布局
我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...
- css实现左右两个div等高
提出问题: 现在有两个div,但是两个div里面内容多少不确定,可能左边多,可能右边多,css要如何设置可以保证左右两边的div等高呢? 解决方案: 每个div使用display:table-cell ...
- DIV+CSS布局时, DIV的高度和宽度特性
这个没有特别的做要求,你要根据你自己的页面整体布局来设置,还有根据div的特性来设置,div默认情况是宽度最大化(100%).高度最小化,高度随着内容自动伸展: 一般情况做网页的话,大部分都是固定了总 ...
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- 解决网页刷新时,隐藏div元素闪现问题
最近项目遇到一个问题,需要对一个div中的元素设置根据不同的情况进行显示和隐藏. 因为默认该div是显示的,所以在刷新页面的时候,会先加载这个div进行显示,加载完成后又执行到 hide() 方法,使 ...
- 解决:并排的两个div底部对齐
我希望在页面上画2个栈,并列起来,并且其内容是动态的,高度.宽度都可变,但是要保持底部对齐,如图: 实现的代码如下: <html> <head> <meta http-e ...
随机推荐
- Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换
一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...
- ROS出现“Couldn't find executable named listener below //home/xxx/catkin_ws/src/mypack”问题
在执行节点时出现了如下图所示的错误: 错误原因是在路径下找不到可执行的节点文件.但事实是已经对工作空间进行了编译,并且在devel /lib/my_serial_node 中已经生成了可执行文件. 如 ...
- Redis源码解析:10scan类命令的实现
像keys或者smembers命令,需要遍历数据集合中的所有元素.在一个大的数据库中使用,可能会阻塞服务器较长的一段时间,造成性能问题,因此不适用与生产环境. 在Redis2.8.0中引入了scan类 ...
- @atcoder - AGC035D@ Add and Remove
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 N 张排成一行的卡片,第 i 张卡片上面写着 Ai. 重复 ...
- 自定义View系列教程08--滑动冲突的产生及其处理
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- Oracle中组合索引的使用详解(转)
在Oracle中可以创建组合索引,即同时包含两个或两个以上列的索引.在组合索引的使用方面,Oracle有以下特点: 1. 当使用基于规则的优化器(RBO)时,只有当组合索引的前导列出现在SQL语句的w ...
- 模板—树上倍增LCA
int LCA(int x,int y) { if(x==y)return x; if(dep[x]>dep[y])swap(x,y); while(dep[x]<dep[y]) ;;i+ ...
- phpstudy一直使用php5.6版本一直“”“报错应用程序无法正常启动0xc000007b”,亲测可行
http://www.php.cn/xiazai/gongju/1351 vc9和vc11-vc14运行库 2018-01-26 来源/作者:php中文网 «» 下载次数:7808 工具简介: php ...
- 分布式TensorFlow集群local server使用详解
通过local server理解分布式TensorFlow集群的应用与实现. 简介 TensorFlow从0.8版本开始,支持分布式集群,并且自带了local server方便测试. Local ...
- 利用sort对数字排序
sort,可排序字符串,按照ASCII码排序. 但也可以穿一个比较函数,实现比较数组内容,排序数组的功能. var arr = [40, 32, 45, 89, 93, 0, 46, 74]; var ...