左侧宽固定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. this关键字剖析

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. memset函数使用

    函数原型 void *memset(void *s,int c,size_t n): 功能 将已开辟内存空间 s 的首 n 个字节的值设为值 c. 头文件  #include<memory.h& ...

  3. OkHttp3的简单使用(一)

    一.导入 1)gradle方式: compile 'com.squareup.okhttp3:okhttp:3.8.0'(okhttp 最新版) compile 'com.squareup.okio: ...

  4. C#静态类 静态方法与非静态方法比较

    静态类 在类(class)上加入static修饰,表示该类无法被实例化,并将该类中,无法实例化变量或函数 静态类的主要特性 仅包含静态成员 无法实例化 静态类的本质,时一个抽象的密封类,所以不能被继承 ...

  5. linux获取域名地址

    dig live-195887137.cn-north-1.elb.amazonaws.com.cn +short

  6. 不值一提,却又不得不提的“CSS文本超出部分省略号代替”

    偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...

  7. 运行Scrapy工程,报错ModuleNotFoundError: No module named 'win32api'解决方法

    1.运行爬虫scrapy crawl name,报错ScrpyModuleNotFoundError: No module named 'win32api' 2.解决方法: 在https://gith ...

  8. Win通过端口号结束进程

    准备: 01在cmd中查看命令使用 格式:命令名称 /? 02netstat 03findstr C:\Users\Good>findstr /? 在文件中寻找字符串. ...... strin ...

  9. Spark调优秘诀——超详细

    版权声明:本文为博主原创文章,转载请注明出处. Spark调优秘诀 1.诊断内存的消耗 在Spark应用程序中,内存都消耗在哪了? 1.每个Java对象都有一个包含该对象元数据的对象头,其大小是16个 ...

  10. eclipse创建springmvc项目

    一.在eclipse中创建maven-archetype-webapp项目: 1.新建项目选择maven项目 2.默认,下一步 3.选择maven-archetype-webapp,其他保持默认即可 ...