<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
#wrap {
overflow: hidden;
}

#content,
#sidebar {
background-color: #eee;
}

#sidebar {
position: relative;
float: left;
width: 44px;
}

#sidebar #btn {
position: absolute;
top: 220px;
right: -20px;
width: 20px;
height: 40px;
background: red;
}

#content {
margin-left: 80px;
}

</style>
</head>

<body>
<div id="wrap">
<div id="sidebar" style="height:500px;">固定宽度区<span id="btn">点我</span></div>
<div id="content" style="height:500px;">自适应区</div>
</div>

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
var flag = 0;
$("#btn").click(function() {
if (flag == 0) {
$("#sidebar").css("width", "130px");
$("#content").css("margin-left", "166px");
flag = 1;
} else {
$("#sidebar").css("width", "44px");
$("#content").css("margin-left", "80px");
flag = 0;
}
})
</script>
</body>

</html>

一个简单的左侧固定右侧自适应demo的更多相关文章

  1. html布局,左侧固定右侧自适应

    前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...

  2. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

  3. css布局中左侧固定右侧自适应

    float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...

  4. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  5. css布局之左侧固定右侧自适应布局

    参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...

  6. CSS左侧固定右侧自适应

    方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...

  7. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  8. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  9. css左侧固定宽度右侧自适应

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

随机推荐

  1. 感知器、逻辑回归和SVM的求解

    这篇文章将介绍感知器.逻辑回归的求解和SVM的部分求解,包含部分的证明.本文章涉及的一些基础知识,已经在<梯度下降.牛顿法和拉格朗日对偶性>中指出,而这里要解决的问题,来自<从感知器 ...

  2. 在阿里云主机上基于CentOS用vsftpd搭建FTP服务器

    最近需要在一台阿里云的云服务器上搭建FTP服务器,在这篇博文中分享一下我们根据实际需求进行的一些配置. ftp软件用的是vsftpd. vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序 ...

  3. mybatis动态调用表名和字段名

    以后慢慢启用个人博客:http://www.yuanrengu.com/index.php/mybatis1021.html 一直在使用Mybatis这个ORM框架,都是使用mybatis里的一些常用 ...

  4. Easyui datebox 限制时间选择范围

    Require Date: <input class="easyui-datebox" data-options="formatter:myformatter,pa ...

  5. Tables without a clustered index are not supported in this version of SQL Server. Please create a clustered index and try again.

    问题: Azure Sql 在插入数据是出现“Msg 40054, Level 16, State 1, Line 2  Tables without a clustered index are no ...

  6. 在MyBook Live上部署svn

    一直以来都在用svn管理源代码,美中不足的是由于svn服务器端部署在本地,无法实现在异地迁入迁出程序,因此考虑将svn服务器部署在我的MyBook Live上. 一.部署svn 1.分别执行以下2条命 ...

  7. AES加密算法实现

    AES算法是一种对称加密算法,是美国国家标准技术研究所NIST旨在取代DES的21世纪的加密标准. 下文实例中,密钥采用了直接写死的方式,实际使用中可以配合RSA加密算法加密密钥,从而达到更好的安全效 ...

  8. CRM客户关系管理系统 北京易信软科信息技术有限公司

    北京易信软科信息技术有限公司 推出大型erp系统,库存管理系统,客户关系管理系统,车辆登记管理系统,员工管理系统,采购管理系统,销售管理系统,为您的企业提供最优质的产品服务 北京易信软科您可信赖的北京 ...

  9. Datatable 筛选条件、排序 和获取datagrid当前页面 数据

    1.转化为DataView进行筛选和排序  DataTable dt = BL.UserInfo();//查询返回的DataTable数据 DataTable dt2 = new DataTable( ...

  10. Eclipse使用tomcat的原理

    1. 当我们使用Eclipse将项目部署到Tomcat的时,我们发现,在Tomcat下的webapps目录下并没有我们创建好的项目,但是当通过Eclipse启动服务器后,项目却真的可以访问到,这是为什 ...