目标是实现如上图带header和footer的双栏布局,其中右侧sidebar是固定宽度,左侧content是自适应;

https://www.zybuluo.com/dengzhirong/note/169592

这里有双栏布局实现的3种方法:

1.左浮动+margin

2.绝对定位+margin-left

3.左浮动+负margin

这里采用方法3,如下:

HTML

 <div id="header">header</div>
<div id="main">
<div id="content">content</div>
</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>

CSS

 #header {
background-color: gray;
height: 50px;
}
#main {
width: 100%;
float: left;
}
#content {
margin-right: 400px; background-color: red;
height: 300px;
}
#sidebar {
width: 400px;
float: left;
margin-left: -400px;
clear: right; background-color: green;
height: 100px;
}
#footer {
clear: both; background-color: gray;
height: 50px;
}

footer 中的 clear: both 作用是清除浮动

如果不加这句,footer会直接跑到header下方,被main和sidebar遮盖

前端-带header和footer的双栏布局的更多相关文章

  1. RecyclerView添加Header和Footer

    使用过RecyclerView的同学就知道它并没有添加header和footer的方法,而ListView和GirdView都有,但是开发过程中难免有需求需要添加一个自定义的header或者foote ...

  2. CSS布局:Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  3. 转:CSS布局:Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  4. 如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...

  6. easy Html5 - Jquery Mobile之ToolBars(Header and Footer)

    jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile:那么jquery mobile到底包括些什么呢 简介工具栏是在移动网站和应用中的头部,尾部或者内容中的工具条:Jqu ...

  7. 快乐学习 Ionic Framework+PhoneGap 手册1-2{介绍Header,Content,Footer的使用}

    *先运行第一个简单的APP,介绍Header,Content,Footer的使用 {2.1}运行一个简单的APP,效果如下 {2.2}Header代码 <ion-header-bar class ...

  8. html5新特性-header,nav,footer,aside,article,section等各元素的详解

    Html5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性.级块性元素.行内语义性元素和交互性元素四大类. 下面是对各标签的详解,section.he ...

  9. css常见双栏和三栏布局

    左侧固定右侧自适应 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 如何简单的理解TDD与DDT

    TDD:TEST-DRIVEN Development 测试驱动开发究竟是什么意思?如何理解测试驱动开发? 举个红绿条简单的例子: 1.编写测试代码 2.编译运行测试代码,肯定会失败,因为实现代码还没 ...

  2. 不要忽视Web编程中的小细节

    概述:长时间以来,我们创造了某些在构造和范围内用以提升网站易用性的约定和实践.然后在我们进行web编程的时候总有一些疏忽和纰漏.这里总结了一些web编程时容易出现的小错误,并给出了相应的补救方法,希望 ...

  3. LeetCode初级算法(动态规划+设计问题篇)

    目录 爬楼梯 买卖股票的最佳时机 最大子序和 打家劫舍 动态规划小结 Shuffle an Array 最小栈 爬楼梯 第一想法自然是递归,而且爬楼梯很明显是一个斐波拉切数列,所以就有了以下代码: c ...

  4. 什么是SG?+SG模板

    先,定义一下 状态Position P 先手必败 N x先手必胜 操作方法: 反向转移 相同状态 不同位置 的一对 相当于无 对于ICG游戏,我们可以将游戏中每一个可能发生的局面表示为一个点.并且若存 ...

  5. myeclipse非正常关闭处理办法

    myeclipse正常或非正常关闭后,再次运行,不显示启动时的logo和读条,进入主页面后程序基本就卡死,无法正常运行,解决办法. 方法一:修改工作空间在刚启动Myeclipse的时候会有一个选择工作 ...

  6. @SessionAttribute使用详解

    @SessionAttribute使用详解   @ModelAttribute注解作用在方法上或者方法的参数上,表示将被注解的方法的返回值或者是被注解的参数作为Model的属性加入到Model中,然后 ...

  7. Java继承改进

    一.java继承改进 首先,多继承的缺点: 1.继承多个父类,父类中方法名相同,产生歧义 2.父类中方法同名,子类未覆盖,也会歧义 所以,java改进,类只能单继承,接口可以多继承 接口中只有抽象方法 ...

  8. ORACLE将查询的多条语句拼在一个字段下

    select listagg(字段名,'分隔符') within group (order by 某个字段)

  9. mybatis批量插入插入数据、批量条件查询

    ps:参考文章连接:https://www.cnblogs.com/admol/articles/4248159.html 关于个人的使用经验:先把数据放到bean中,多个的话就全放入list集合,如 ...

  10. 1269 匈牙利游戏 2012年CCC加拿大高中生信息学奥赛

    1269 匈牙利游戏 2012年CCC加拿大高中生信息学奥赛 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond         题目描述 Description ...