左侧宽固定200,高度自适应,右侧的框宽度都自适应
<style>
* {
margin: 0;
padding: 0;
}
html {
height: auto;
}
body {
margin: 0;
padding: 0;
}
#container {
background: #ffe3a6;
}
#wrapper {
display: inline-block;
border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/
position: relative;
vertical-align: bottom;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;/*==此值等于左边栏的宽度值==*/
position: relative;
}
#main {
float: left;
}
#sidebar{
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
<div id="container">
<div id="wrapper">
<div id="sidebar">Left Sidebar</div>
<div id="main">Main Content</div>
</div>
</div>

css布局,面试时经常问的布局的更多相关文章

  1. 面试时,问哪些问题能试出一个 Android 应用开发者真正的水平?【转自知乎】

    这几年面过的各种Android开发也有三位数了,failed的不敢说,pass的基本都没有看走眼,来得晚了也想说说我的体会. 一般面试时间短则30分钟,多则1个小时,这么点时间要全面考察一个人难度很大 ...

  2. 面试时,问哪些问题能试出一个Android应用开发者真正的水平?

    一般面试时间短则30分钟,多则1个小时,这么点时间要全面考察一个人难度很大,需要一些技巧,这里我不局限于回答题主的问题,而是分享一下我个人关于如何做好Android技术面试的一些经验: 面试前的准备 ...

  3. [随想感悟] 面试时,问哪些问题能试出一个 Android 应用开发者真正的水平?【转自知乎】

    这几年面过的各种Android开发也有三位数了,failed的不敢说,pass的基本都没有看走眼,来得晚了也想说说我的体会. 一般面试时间短则30分钟,多则1个小时,这么点时间要全面考察一个人难度很大 ...

  4. 面试时被问到js的绑定事件,我居然不知道怎么回答。回来查了下,做个笔记

    事件绑定是几种方法 以下为例: <button id='btn'>click me</button> function Btn(){ alert('click'); } 1.直 ...

  5. 【闲谈】应聘时要问HR的7个问题

    前段时间朋友看了一本书,聊天中告诫了我关于毕业大学生面试时应该问HR的7个问题.这7个问题如下: 我所应聘的这个职位为什么会出现空缺 请问贵公司最成功的员工曾为公司作出了什么样的贡献 如何评估自己在试 ...

  6. HTML、CSS知识点,面试开发都会需要--No.4 内容布局

    No.4 内容布局 1.列举场景 同一行布局三个元素.三个元素等比显示,并且其他元素不会围绕这三个元素.如下要让下面的三个column等比显示在一行: 2.通过Float属性实现 (1)float:l ...

  7. 前端一面/面试常考题1-页面布局:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。

    题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...

  8. 你不知道的css各类布局(三)之自适应布局

    自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...

  9. 你不知道的css各类布局(二)之流体布局、液体布局、栅格布局

    流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元 ...

随机推荐

  1. delphi取括号内或括号外的内容

    function TSetParkForm.RemoveSgin(str: string): string; // 去掉括号内的内容(包括括号) var i1, i2, i: integer; beg ...

  2. C# socket请求的名称有效 但是找不到请求的类型的数据

    程序以前在xp下运行一直良好,但将安装在win7下面却出现"请求的名称有效 但是找不到请求的类型的数据"错误,程序底层通信是基于socket,时间久了就会出现系统黑屏死机,但并不知 ...

  3. c# as与is的区别

    在c#语言中关于类型的判断与转换有is和as这2种操作符,具体用法如下: is检查一个对象是否兼任与指定的类型,并返回一个Boolean值:true或false,主要,is操作符永远不会抛出异常,一下 ...

  4. 为什么 kubernetes 天然适合微服务 (2)

    此文已由作者刘超授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验 三.微服务化的十个设计要点 微服务有哪些要点呢?第一张图是 SpringCloud 的整个生态. 第二张图是微服 ...

  5. utp

    接口测试大致分为两种:数据驱动和代码驱动 数据驱动:主要处理用例之间没有关联关系的用例集合,一般以(excel.yaml)文件形式存储用例 代码驱动:主要是处理用例之间存在关联关系的用例(如:抽奖,需 ...

  6. Charles设置可抓https的包

    一.help 二.proxy

  7. 【ARC069F】Flags 2-sat+线段树优化建图+二分

    Description ​ 数轴上有 n 个旗子,第 ii 个可以插在坐标 xi或者 yi,最大化两两旗子之间的最小距离. Input ​ 第一行一个整数 N. ​ 接下来 N 行每行两个整数 xi, ...

  8. python自带的排列组合函数

    需求: 在你的面前有一个n阶的台阶,你一步只能上1级或者2级,请计算出你可以采用多少种不同的方法爬完这个楼梯?输入一个正整数表示这个台阶的级数,输出一个正整数表示有多少种方法爬完这个楼梯. 分析:提炼 ...

  9. The server of Apache (二)——apache服务客户端验证

    一.确定网站名称.IP地址 地址为: 192.168.1.1   域名为: www.benet.com 二.配置可用的DNS域名服务或者修改本地hosts记录 ~] # vim /etc/hosts ...

  10. 富文本的一般处理方式,document.getElementById('富文本的ID').contentWindow.document.body.innerHTML = '%s'" %(content)

    如果套不出来,去问前端开发帮忙吧 哈哈