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 {
background-color: red;
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;
background-color: white;
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/html; charse ...
- css span宽度和css span高度成功设置经验篇
我们介绍两种情况下的对span宽度高度样式成功设置. 为了观察和实践CSS SPAN宽度和span高度成功设置,DIVCSS5新建一个css命名为“.divcss5”的盒子,设置css宽度为150px ...
- CSS之背景的填充范围
1.资料:CSS2.1 进行了更正:元素的背景是内容.内边距和边框区的背景 2.也就是说背景颜色,background-color:这些会填充内边距和边框border, 而不会填充外边框margin的 ...
- CSS 滚动条宽度 All In One
CSS 滚动条宽度 All In One 滚动条宽度 IE 16px Chrome 12px scrollbar width bug 改变设计稿的宽度,没考虑到 scrollbar width sol ...
- CSS样式让元素填充剩余部分为自己的高度或宽度
#nav { background-color: #85d989; width: 100%; height: 50px; } #content { background ...
- 解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题
/*左侧div*/ .left-div{width: 220px;height: 100%;position: fixed;background: #FFFFFF;} /*右侧div*/ .right ...
- css左右侧自动填充宽度布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS实现宽度自适应100%,宽高16:9的比例的圖片或者矩形
前言 图片的大小是多少,宽度一定,高度要始终自自适应为16:9. 解决 1通过js,程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.我们的原则是能用css实现的功能尽量用css,这有利 ...
- 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度,即dataGridView根据数据自适应大小
上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...
随机推荐
- virtualbox+vagrant学习-2(command cli)-6-vagrant init命令
Init——创建Vagrantfile文件 格式: vagrant init [options] [name [url]] 通过创建初始的Vagrantfile文件(如果不存在的话),将当前目录初始化 ...
- 适合自己的adblock过滤列表
轻微完美主义,极简主义 已屏蔽广告: 1.CSDN的广告 2.百度侧栏热点搜索 3. 知乎广告 4.stackoverflow的推送广告 5.LeetCode的推送的是否见过这个题 bbs.csdn. ...
- Spring源码分析(十三)缓存中获取单例bean
摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 介绍过FactoryBean的用法后,我们就可以了解bean加载的过程了 ...
- Debian 8 时间同步
每天执行一次 sudo ntpdate ntp.ubuntu.com 逐渐觉得麻烦了,有没有自动执行的方法? 在Linux中用户可以执行例行性的工作,使用crontab这个命令. 步骤: 1.在终端中 ...
- 目前.NET Core创建Windows Service比较好的一个开源框架:DasMulli.Win32.ServiceUtils
新建一个.NET Core控制台程序,搜索并下载Nuget包:DasMulli.Win32.ServiceUtils GitHub 链接及使用指南 Write a windows service us ...
- HTTP协议图
- 数据结构与算法之链表(LinkedList)——简单实现
这一定要mark一下.虽然链表的实现很简单,且本次只实现了一个方法.但关键的是例子:单向链表的反转.这是当年我去H公司面试时,面试官出的的题目,而当时竟然卡壳了.现在回想起来,还是自己的基本功不扎实, ...
- 2017-2018-1 20155216 《信息安全系统设计基础》 实现mypwd
2017-2018-1 20155216 <信息安全系统设计基础> 实现mypwd 作业要求: 1.学习pwd命令 2.研究pwd实现需要的系统调用(man -k; grep),写出伪代码 ...
- 13-[Mysql]--pymysql模块
1.介绍 之前我们都是通过MySQL自带的命令行客户端工具mysql来操作数据库,那如何在python程序中操作数据库呢?这就用到了pymysql模块,该模块本质就是一个套接字客户端软件,使用前需要事 ...
- 【BZOJ1051】[HAOI2006]受欢迎的牛
[BZOJ1051][HAOI2006]受欢迎的牛 题面 bzoj 洛谷 题解 假如\(A\)喜欢\(B\)就连一条\(A\)到\(B\)的边 然后缩点,如果图不连通就\(Impossible\) 否 ...