html布局,左侧固定右侧自适应
前几天看到我们的UI稿，要实现左侧固定树结构，右侧自适应。想着自己写过几次但是每次都会忘记，在这里做个笔记。
第一种方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
#wrap{
display: table;
width: 100%;
}
#wrap>div{
display: table-cell;
height: 800px;
}
#sidebar{
width: 200px;
background: red;
}
#contend{
background: blue;
} </style>
</head>
<body>
<div id="wrap">
<div id="sidebar"></div>
<div id="contend"></div> </div>
</body>
<script>
</script>
</html>
这种布局主要技术就是让div转变成table元素，让div标签拥有table，td标签的特点。
第二种方法
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--<link rel="stylesheet" href="test.css" type="text/css">-->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style rel="stylesheet" type="text/css">
html,body{
padding: 0px;
margin: 0px;
}
.one {
float: left;
height: 100px;
width: 300px;
background-color: blue;
}
.two {
overflow: hidden;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
<script>
setTimeout(function () {
$('.one').animate({width:0},500)
},500)
</script>
</html>
这种布局左侧固定栏浮动，右侧div标签设置overflow:hidden | auto；div就不会伸到左侧固定栏的下面，碰到浮动元素就会停止。因为出发了div.normalDiv的BFC特性，具体不是很了解，有兴趣的可以自行百度。这样貌似嵌套一个父级div还不用清浮动......（没有测浏览器兼容问题）
第三种方法：
以后看到了，在追加。。。。。。如过有读者测试了这两个方法，请告知兼容问题，和其他问题。多谢。
html布局,左侧固定右侧自适应的更多相关文章
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- 七种CSS左侧固定,右侧自适应两栏布局
一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...
- css布局中左侧固定右侧自适应
float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...
- css中左侧固定,右侧自适应
谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度; 2.只告 ...
- css布局之左侧固定右侧自适应布局
参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...
- 一个简单的左侧固定右侧自适应demo
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- CSS左侧固定右侧自适应
方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- css左侧固定宽度右侧自适应
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
随机推荐
- Spring的Service层与Dao层解析
本文转载于网络,觉得写得很透彻. dao完成连接数据库修改删除添加等的实现细节,例如sql语句是怎么写的,怎么把对象放入数据库的.service层是面向功能的,一个个功能模块比如说银行登记并完成一次存 ...
- Singleton模式C++实现
Singleton模式C++实现 Singleton是设计模式中比较简单的一个.园中的朋友们应该都很熟悉了.前段时间参加xxx外企的面试,和面试官讨论C++的时候正好写了一个.当时由于在有些地方考虑不 ...
- 关于LAMP的配置之（虚拟机的安装、创建、配置）
一.先安装好VMware (1)根据电脑系统是多少位的,可以从网上下载相应的虚拟机VMware (2)下载好了之后,就可以先行安装虚拟机,双击打开VMware的安装程序 (3)再出现的对话框中,点击& ...
- jvm内存增长问题排查
jvm内存增长问题排查 排查个jvm 内存占用持续增加的问题,纪录一下,引以为戒. 运维发现应用jvm内存占用在发布后回落,然后持续增高,,dump后分析一下: 占内存的大部分是这种名字相似的bean ...
- FunDA（3）－ 流动数据行操作：FDAPipeLine operations using scalaz-stream-fs2
在上节讨论里我们介绍了数据行流式操作的设想,主要目的是把后台数据库的数据载入前端内存再拆分为强类型的数据行,这样我们可以对每行数据进行使用和处理.形象点描述就是对内存里的一个数据流(data-stre ...
- 170116、centos6.4下nginx和ftp搭建图片服务器
一.需要的组件 图片服务器两个服务: Nginx(图片访问): 1.http服务:可以使用nginx做静态资源服务器.也可以使用apache.推荐使用nginx,效率更高. 2.反向代理 实现 负载均 ...
- Kindeditor JS 富文本编辑器图片上传指定路径
js //================== KindEditor.ready(function (K) { var hotelid = $("#hotelid").val(); ...
- netty(5)高级篇-私有协议栈
来源:<Netty权威指南> 作者:李林峰 一.私有协议介绍 由于现代软件的复杂性,一个大型软件系统往往会被人为地拆分称为多个模块,另外随着移动互联网的兴起,网站的规模越来越大,业务功能 ...
- Openjudge-NOI题库-旅行-数论
题目描述 Description 转眼毕业了,曾经朝夕相处的同学们不得不都各奔东西,大家都去了不同的城市开始新的生活.在各自城市居住了一段时间后,他们都感到了一些厌倦,想去看看其他人的生活究竟如何,于 ...
- 重要的几个热键[Tab], [ctrl]-c, [ctrl]-d
来源于:鸟哥的Linux私房菜 在继续后面的章节之前,这里很需要跟大家再来报告一件事,那就是我们的文字模式里头具有很多的功能按键, 这些按键可以辅助我们进行指令的编写与程序的中断呢!这几个按键请大家务 ...