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 ...
随机推荐
- ORA-00936: missing expression
1.错误描述 Connected to Oracle Database 11g Enterprise Edition Release 11.2.0.1.0 Connected as scott@ORC ...
- .Net 4.X 提前用上 .Net Core 的配置模式以及热重载配置
1. 前言 在提倡微服务及 Serverless 越来越普及的当下,在 .Net Core 之前,.Net 应用的配置模式往往依赖于一个名为 web.config 的 XML 文件,耦合性高,而可扩展 ...
- hibernate学习(一)配置,导包
框架的作用 学过javaWeb基础的已经对web层 jsp servlet ,service 层 ,dao层的jdbc .DBUtils 有了很深的了解 并编写代码实现某种功能 为了提高开发 ...
- OpenStack_I版 6.Neutron部署
Neutron是不能自己创建网络的,它需要借助插件才能创建虚拟网桥.网卡 依赖插件 配置ml2为核心插件 本次网络模型采用扁平化网络,不同的网络类型不同的配置,不同的使用方法 打开安全组功能 Linu ...
- iOS - Mac 常用快捷键
前言 可以按下组合键来实现通常需要鼠标.触控板或其他输入设备才能完成的操作. 要使用键盘快捷键,需按住一个或多个修饰键,同时按快捷键的最后一个键.例如,要使用快捷键 Command-C(拷贝),请按住 ...
- java实现马踏棋盘问题
1.问题描述: 在国际象棋中,马走日,用户输入棋盘的起始位置从x:0-4,y:0-3输出从这一点开始,马走完整个棋盘的各个方案,并输出方案数 2.输入样式: 请输入棋盘马起始位置: 0 0 3.输出样 ...
- Linux之shell编程
一.Bash变量 1) Bash变量与变量分类 1. 定义:变量是计算机内存的单元,其中存放的值可以改变 2. 变量命令规则 #变量名必须以字母或下划线开头,名字中间只能由字母.数字和下划线组成 #变 ...
- each遍历的用法
- 初学 Java Web 开发,从 Servlet 开发
1. 基本要求:Java 编程基础 有良好的 Java 语言编程基础,这是必须的,在讨论 Web 开发技术时提了一个 Java 编程基础的问题会被鄙视的. 2. 环境准备 (Eclipse + Tom ...
- 安裝pycharm
一路按照這個教程走下來的.大體無誤. http://www.jianshu.com/p/042324342bf4 除了激活碼那裏,已經被cancel了,查找了很多辦法,最後發現衹要換成三個選項之一的 ...