CSS 剩余宽度和高度完全填充
<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 剩余宽度和高度完全填充的更多相关文章
- css 剩余宽度完全填充
从网上转的. <html> <head> <meta http-equiv="Content-Type" content="text/htm ...
- CSS中宽度与高度
div的高度 div由的高度是由它里面的字体乘以字体建议的行高确定,跟这个字体大小没有关系(不同字体相同字体大小,会影响div的高度.)如过明确告诉浏览器行高,div高度就是行高. 文字两端对齐: 文 ...
- css实现div的高度填满剩余空间
css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...
- css span宽度和css span高度成功设置经验篇
我们介绍两种情况下的对span宽度高度样式成功设置. 为了观察和实践CSS SPAN宽度和span高度成功设置,DIVCSS5新建一个css命名为“.divcss5”的盒子,设置css宽度为150px ...
- 如何改变span元素的宽度与高度
内联元素:也称为行内元素,当多个行内元素连续排列时,他们会显示在一行里面. 内联元素的特性:本身是无法设置宽度和高度属性的,但是可以通过CSS样式来控制,达到我们想要的宽度和高度. span举例1: ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- js和jquery获取图片真实的宽度和高度
1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...
- jquery尺寸:宽度与高度
width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边距). innerWidth() 方法返回元素的宽度(包括 ...
- 关于Div的宽度与高度的100%设定
http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...
随机推荐
- Linux显示一个二进制文件或可执行文件的完整路径
Linux显示一个二进制文件或可执行文件的完整路径 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ which halt /sbin/halt
- hdu5937 Equation
题解其实网上有 突然有点感想 为什么可以用搜索或状压,因为方案数很有限,它要求每种方案不同就意味着搜索的次数也一定,所以现在就应该坚定往这方面想,找部分方案的贪心.这和上一题一样,都是先暴力,后面处理 ...
- Windows Developer Day Review
北京时间 3 月 8 日凌晨 1 点钟,今年的第一次 Windows Developer Day 正式召开. 因为时间太晚看不了直播,我也是第二天早上在公司看的重播.整个会议过程有很多值得去研究 ...
- OWA 无法连接到Exchange
Outlook WebAccess中无法连接到Microsoft Exchange.如果问题仍然存在,请联系您的组织的技术支持. 1. 在Exchange邮件服务器,收件人配置--邮箱--右击用户 ...
- 【SDOI2009】HH的项链 (莫队)
题面 Description HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此, 他的 ...
- Bzoj1176:Mokia&Cogs1752:[BOI2007]摩基亚Mokia
题目 Cogs 没有Bzoj的权限号 Sol 离线,\(CDQ\)分治,把询问拆成\(4\)个,变成每次求二位前缀和 那么只要一个修改操作(关键字为时间,\(x\),\(y\))都在这个询问前,就可以 ...
- [CodeVS2370] 小机房的树 (LCA, 树链剖分, LCT)
Description 小机房有棵焕狗种的树,树上有N个节点,节点标号为0到N-1,有两只虫子名叫飘狗和大吉狗,分居在两个不同的节点上.有一天,他们想爬到一个节点上去搞基,但是作为两只虫子,他们不想花 ...
- c#多线程同步之lock
一提起lock,想必大家都很熟悉,因为它易用,顾名思义,就是一把锁,常用于多线程的同步,一次只允许一个线程进入.最近遇到一个很诡异的bug. private static readonly objec ...
- mysql简单操作
1,mysql 唤醒数据库,mysql -uroot -p11221 2,创建一个数据库: CREATE DATABASE mldn CHARACTER SET UTF8; 也可以写成小写的:crea ...
- c#缓存技术(Dictionary)
无论任何时候,只要传递的参数一致,返回的结果都应该是一致的.这样的函数我们才能够利用缓存.首先我们先定义一个函数,而这个函数将会是我们后面需要缓存的函数: 然后我们修改函数使之能够进行缓存: 这里我们 ...