从网上转的。

<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 剩余宽度完全填充的更多相关文章

  1. CSS 剩余宽度和高度完全填充

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

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

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

  3. CSS之背景的填充范围

    1.资料:CSS2.1 进行了更正:元素的背景是内容.内边距和边框区的背景 2.也就是说背景颜色,background-color:这些会填充内边距和边框border, 而不会填充外边框margin的 ...

  4. CSS 滚动条宽度 All In One

    CSS 滚动条宽度 All In One 滚动条宽度 IE 16px Chrome 12px scrollbar width bug 改变设计稿的宽度,没考虑到 scrollbar width sol ...

  5. CSS样式让元素填充剩余部分为自己的高度或宽度

    #nav {     background-color: #85d989;     width: 100%;     height: 50px; } #content {     background ...

  6. 解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题

    /*左侧div*/ .left-div{width: 220px;height: 100%;position: fixed;background: #FFFFFF;} /*右侧div*/ .right ...

  7. css左右侧自动填充宽度布局

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. CSS实现宽度自适应100%，宽高16:9的比例的圖片或者矩形

    前言 图片的大小是多少,宽度一定,高度要始终自自适应为16:9. 解决 1通过js,程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.我们的原则是能用css实现的功能尽量用css,这有利 ...

  9. 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度，即dataGridView根据数据自适应大小

    上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...

随机推荐

  1. Docker存储方式选型建议

    转自:https://segmentfault.com/a/1190000007168476 第一部分 问题诊断 事情从一次实施项目说起,我们需要帮助客户将他们的应用容器化并在数人云平台上发布此应用. ...

  2. Vmware10组建局域网

    Vmware10组建局域网很简单,特别是用Ubuntu16.04作为操作系统,基本上按照如下步骤来,是不会出现问题的. 1.首先,启动虚拟机,选择“编辑”->“虚拟网络编辑器” 2.改为桥接模式 ...

  3. 时分秒倒计时的js实现

    示例: 剩余天数:08天02事02分02秒 html代码: <div id="timer" data-timer="20160628140203" sty ...

  4. 学习笔记——线程 Thread

    Thread是.net1.0 1.1时出现的 主要了解线程等待.回调.前后台线程区别 1.实例: //定义:public delegate void ThreadStart(); ThreadStar ...

  5. 图片 和 base64 互转

    图片转base64 NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:urlStr]]; UIImage *img = ...

  6. Windows Mysql8 设置大小写敏感

    windows系统无法改成 lower_case_table_names=0, 因为windows默认是1,就算改也只能改成2,以下截自 MySQL 8.0 Reference Manual 然后,当 ...

  7. 关于mysql中GROUP_CONCAT函数的使用

    偶然看到公司存储过程中有个字符串拼接的函数,改bug过程中使用到了,还挺有用的,于是记录下来方便记忆,帮助有需要的人. 这是我需要整理的串,他是调用了一个存储过程,传入组织机构的id和迭代层数,返回来 ...

  8. 批量生成文件夹内所有文件md5

    说明:md5批量生成批处理脚本,无需安装任何软件,直接调用系统文件进行生成,简单基于windows命令编写了一个批量生成md5值的脚本. 使用说明:新建文本文档,命名为get_md5.bat,直接将代 ...

  9. linux-RPM 打包原理 SPEC 编写规范

    一.编写spec脚本 由前面的日志了解到,生成rpm除了源码外,最重要的就是懂得编写.spec脚本.rpm建包的原理其实并不复杂,可以理解为按照标准的格式整理一些信息,包括:软件基础信息,以及安装.卸 ...

  10. 一维码Codabar简介及其解码实现(zxing-cpp)

    一维码Codabar:由4条黑色线条,3条白色线条,合计7条线条所组成,每一个字元与字元之间有一间隙Gap做区隔. 条形码Codabar包含21个字元: (1).10个数字0~9; (2)." ...