<!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. udacity google deep learning 学习笔记

    1.为什么要在卷积网络中加入pooling(池化) 如果只利用卷积操作来减少feature map的大小,会失去很多信息.所以想到一种方法,减小卷积时的stride,留下大部分信息,通过池化来减小fe ...

  2. 带无缝滚动的轮播图（含JS运动框架）-简洁版

    昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!! js代码如下: <script> window.onload = function() { var oWra ...

  3. vrrp

    https://zhidao.baidu.com/question/1498182981731748379.html

  4. gradle修改AndroidManifest.xml中的版本号

    def VersionCode = "19" ant.replaceregexp(file:"../Assets/Plugins/Android/AndroidManif ...

  5. Grunt的使用

    在Node环境下.需要预先安装好Node. 1.安装grunt-cli [root@Luxh-01 ~]# npm install -g grunt-cli 2.创建一个目录test [root@Lu ...

  6. ORA-15025: could not open disk "/dev/asm***"--转载

    Symptoms: 打完补丁后,数据库报错ORA-15025,数据库无法启动. alert日志信息: Wed Jul22 16:26:57 2015 ORA-15025:could not open ...

  7. java @Autowired与@Resource的区别

    @Autowired与@Resource的区别     1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2.@Autowired默认 ...

  8. excel2003出现“向程序发送命令时出现错误”解决方法

    电脑已经预装了office2010,因为想要学习 <Excel 图标之道>,安装了Excel2003,刚刚安装好,打开出现“向程序发送命令时出现错误”,虽然点击确定就可以用了,可总是觉得不 ...

  9. Hadoop_配置_linux下编译eclipse插件

    使用的hadoop版本为hadoop-1.2.1(对应的含源码的安装包为hadoop-1.2.1.tar.gz) 将hadoop和eclipse都解压在home中的用户目录下 /home/chen/h ...

  10. Entity Framework学习笔记——配置EF

    初次使用Entity Framework(以下简称EF),为了避免很快忘记,决定开日志记录学习过程和遇到的问题.因为项目比较小,只会用到EF的一些基本功能,因此先在此处制定一个学习目标:1. 配置EF ...