左侧宽固定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. (转)C# HTML解析示例---星星引发的血案

    原文地址:http://www.cnblogs.com/wurang/archive/2013/06/14/3119023.html [前言] 从CSDN转投cnBlog也有一段时间了,发现cnBlo ...

  2. 安装vmtools Error: Unable to execute "/usr/bin/vmware-uninstall-tools.pl.

    Error: Unable to execute "/usr/bin/vmware-uninstall-tools.pl. 安装vmware tools错误解决办法 很多朋友都在用vmwar ...

  3. Digester学习笔记(一)转载

    本博文系转载,作者原文已经无法找到,感谢原作者的辛苦整理 Digester学习笔记(一) 在windows下开发程序,用M$提供的接口处理.ini文件或管理注册表的键值是非常方便的.在java平台上开 ...

  4. LibreOJ 6004 圆桌聚餐 (最大流)

    题解:天啊,这道最大流真是水的一批……只需要每张桌子向每个单位建一条容量为1的边,源点向桌子建边,容量为桌子能坐的人数;单位向汇点建边,容量为单位人数即可,然后根据单位与桌子的连边值是否为一来了解每个 ...

  5. delphi让exe开机自启动

    procedure AutoRunOnSystemStart(Title, FileName: String);const  _Software_Microsoft_Windows_CurrentVe ...

  6. 门面(Facade)模式

    门面(Facade)模式  也叫 外观模式. 外观模式:为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得子系统更加容易使用 /* * 门面(Facade)角色:客户端可以 ...

  7. c++内存模型------计算机系统核心概念及软硬件实现

    c++编程语言有3中不同类项的变量:全局变量.局部变量和动态分配变量.变量的值存储在计算机的内存中,但是变量存储的方式取决于变量的类项.3种类型的变量分别对应存储器中3个特定的区域: 全局变量存放在存 ...

  8. PHP编码技巧

    原则 正确实现功能 执行速度与快 占系统资源少 后期维护方便 编程注意 1.命名很重要 2.适当的使用注释 3.使用一个变量,需要初始化 4.优先使用单引号 $row['id']的效率是$row[id ...

  9. networkx如何将图写到邻接矩阵里?

    nx.write_adjlist(G1,graph_filename1)#生成的是二进制文件nx.write_adjlist(G2,graph_filename2)

  10. 跟我一起读postgresql源码(一)——psql命令

    进公司以来做的都是postgresql相关的东西,每次都是测试.修改边边角角的东西,这样感觉只能留在表面,不能深入了解这个开源数据库的精髓,遂想着看看postgresql的源码,以加深对数据库的理解, ...