<!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. AJAX跨域解决方案

    从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在,这似乎是一个很经典的问题了,是由于javascript的同源策略所导致. 解决的办法,大概有如下几种: 1. 使用中 ...

  2. Bugtags 远程配置功能介绍

    远程配置顾名思义是在不发版的情况下,更改应用的行为和外观.举个例子,如下图:在 Demo Page 中,BUTTON 的颜色不一样,如果想实时修改按钮颜色,测试不同颜色的按钮实际点击情况,该怎么做呢? ...

  3. mysql成绩排名

    关于mysql成绩排名,网上大部分只是order by简单排序,忽略了成绩相同并列名次的问题. 定义了一个表score结构为:

  4. 转（zip文件格式说明）

    zip文件由三部分组成:压缩的文件内容源数据.压缩的目录源数据.目录结束标识结构 1. 压缩的文件内容源数据: 记录着压缩的所有文件的内容信息,其数据组织结构是对于每个文件都由file header ...

  5. HEVC学习之二CTU, CU, CTB, CB, PB, TB

    在H264标准中,编码层的核心是宏块,一个宏块大小为16X16,包含一个16X16的亮度块,以及对于常用的4:2:0采样格式来说还包含两个8X8的色度块.相对应的在HEVC中类似的结构为编码树单元(C ...

  6. 如何保护.net中的dll文件（防破解、反编译）

    如何保护.net中的dll文件(防破解.反编译) 2010-07-19 15:08 [小 大] 来源: 赛迪网 评论: 0 分享至:      百度权重查询 词库网 网站监控 服务器监控 SEO监控  ...

  7. Do things for others

    早上,按照平常的时间去吃早饭,食堂格外的空旷,打饭的员工说今天人很少,我说昨天是有元旦晚会,她说今天是放假,我后来想,还是她说的更有道理.她看的比我清楚更清楚! 幸亏昨晚上记录下了早上要帮别人搜论文的 ...

  8. javascrip小笔记

    function getCookie(name) {//获取name为 var arr, reg = new RegExp("(^| )" + name + "=([^; ...

  9. where 子句中使用通配符

    模糊匹配 ------------------------模糊匹配----------------- '[1-9]'.'[a-z]'.'[^4]' select * from student wher ...

  10. 浅尝辄止——在C++中调用C#的回调函数——COM方式

    这种方式比较简单,给大家分享一下,同时讲一下SafeArray内定义结构体的方法 1. 需求描述 需求是这样的,C++代码和C#代码相互通信(C++一般做服务,C#做客户端),C++一侧准备好数据,然 ...