<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两列式全屏布局</title>

<style type="text/css">
html, body {
margin: 0;
padding: 0;
}

.top {

border: solid 1px black;
margin: 0 0 5px 0;
height: 50px;
}

.sidebar {
position: absolute;
left: 0;
top: 57px;
width: 205px;
background-color: yellow;
border: solid 1px black;
border-left-width: 0;
height: 50px;
}

.main {
margin-left: 210px;

border: solid 1px black;
height: 50px;
}
</style>

</head>

<body>
<div class="top">A(固定高度，宽度自适应)</div>
<div class="sidebar">B(高度任意，宽度为固定)</div>
<div class="main">C(高度任意，宽度为除开B之外的所有空间，自适应)</div>
</body>
</html>

CSS 剩余宽度和高度完全填充的更多相关文章

  1. css 剩余宽度完全填充

    从网上转的. <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  2. CSS中宽度与高度

    div的高度 div由的高度是由它里面的字体乘以字体建议的行高确定,跟这个字体大小没有关系(不同字体相同字体大小,会影响div的高度.)如过明确告诉浏览器行高,div高度就是行高. 文字两端对齐: 文 ...

  3. css实现div的高度填满剩余空间

    css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...

  4. css span宽度和css span高度成功设置经验篇

    我们介绍两种情况下的对span宽度高度样式成功设置. 为了观察和实践CSS SPAN宽度和span高度成功设置,DIVCSS5新建一个css命名为“.divcss5”的盒子,设置css宽度为150px ...

  5. 如何改变span元素的宽度与高度

    内联元素:也称为行内元素,当多个行内元素连续排列时,他们会显示在一行里面. 内联元素的特性:本身是无法设置宽度和高度属性的,但是可以通过CSS样式来控制,达到我们想要的宽度和高度. span举例1: ...

  6. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  7. js和jquery获取图片真实的宽度和高度

    1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...

  8. jquery尺寸：宽度与高度

    width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边距). innerWidth() 方法返回元素的宽度(包括 ...

  9. 关于Div的宽度与高度的100%设定

    http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...

随机推荐

  1. C#图解教程 第十四章 事件

    事件 发布者和订阅者源代码组件概览声明事件订阅事件触发事件标准事件的用法 通过扩展EventArgs来传递数据移除事件处理程序 事件访问器 事件 发布者和订阅者 很多程序都有一个共同的需求,既当一个特 ...

  2. 元素定位-----Selenium快速入门（二）

    一.eclipse设置 工欲善其事必先利其器,在说元素定位之前,先来设置下eclipse. 首先放大一下字体,点击windows-preferences 其次,eclipse对于java的智能提示默认 ...

  3. 未能从程序集“mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”中加载类型“System.Runtime.CompilerServices.TuppressIldasmAttribute”。已解决

    "/"应用程序中的服务器错误. 未能从程序集"mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77 ...

  4. 【Luogu2458】保安站岗（动态规划）

    [Luogu2458]保安站岗(动态规划) 题面 题目描述 五一来临,某地下超市为了便于疏通和指挥密集的人员和车辆,以免造成超市内的混乱和拥挤,准备临时从外单位调用部分保安来维持交通秩序. 已知整个地 ...

  5. Oracle数据库中in（）参数超过一千报错代码报错

    转载请注明出处:http://www.cnblogs.com/xunzhaorendaxia/p/8570604.html 解决方案将select * from tablename where fie ...

  6. 为eclipse安装subclipse（SVN插件）

    1.打开eclipse,点击菜单Help->Install New Software 2.进入安装窗体后,点击安装窗体的右侧的Add按钮,然后在弹出的窗体中输入名称:Subclipse 1.12 ...

  7. JAVA蓝桥杯黄金分割数，涉及到bigdecimal

    import java.math.BigDecimal; public class test { public static void main(String[] args) { BigDecimal ...

  8. Unity3D脚本的生命周期（执行顺序）

    Unity脚本中有许多固定的函数 例如Start();Update(); 而这些函数都有固定的执行顺序 搞清楚这些函数的执行顺序 对于我们理清代码的逻辑就显得尤为重要 举个简单的例子 //脚本A pu ...

  9. MapReduce浅析

    很早之前就用过Hadoop,但对MapReduce中的具体数据流向过程一直不甚明了,用Python Streamming的方式写了几个MapReduce,对这个过程有了一定的认识. 首先我们知道,Ma ...

  10. linux PMBus总线及设备驱动分析

    PMBus协议规范介绍 PMBus是一套对电源进行配置.控制和监控的通讯协议标准.其最新版本为1.3,该规范还在不断演进中,比如新标准中新增的zone PMBus.AVSBus等特性.在其官网上有详细 ...