从网上转的。

<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实战(四)之Docker数据管理

    在生产环境中使用Docker的过程中,往往需要对数据进行持久化,或者需要在多个容器之间进行数据共享,这必然涉及到容器的数据管理操作. 容器中管理数据主要有两种形式: 数据卷:容器内数据直接映射到本地主 ...

  2. 【Git】Git Bash

    版本控制工具Git Bash软件 安装 git.exe  即可

  3. C\C++ vector 构造函数 & 析构函数

    #include <iostream> #include <vector> using namespace std; class Obj { public: Obj(void) ...

  4. iOS使用NSMutableAttributedString实现富文本小结

    NSAttributedString NSAttributedString对象管理适用于字符串中单个字符或字符范围的字符串和关联的属性集(例如字体和字距).NSAttributedString对象的默 ...

  5. libmxml数据结构（源码分析）

    libmxml是一个开源.小巧的C语言xml库.这里简单分析一下它是用什么样的数据结构来保存分析过的xml文档. mxml关键的结构体mxml_node_t是这样的实现的: struct mxml_n ...

  6. Linux操作系统基本操作（1）

    1.常用快捷键 Ctrl+d 键盘输入结束或退出终端 Ctrl+s 暂停当前程序,暂停后按下任意键恢复运行 Ctrl+z 将当前程序放到后台运行,恢复到前台为命令fg Ctrl+a 将光标移至输入行头 ...

  7. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

  8. ARM Linux驱动篇 学习温度传感器ds18b20的驱动编写过程

    ARM Linux驱动篇 学习温度传感器ds18b20的驱动编写过程 原文地址:http://www.cnblogs.com/NickQ/p/9026545.html 一.开发板与ds18b20的入门 ...

  9. docker kafka 外网访问不到

    linux虚拟机中的kafka docker 容器外网显示: 原因: kafka的外网IP端口配置参数设置错误. 原-->设置了容器的IP端口. 改-->设置宿主机的ip以及宿主机上的端口 ...

  10. angularjs animation

    http://augus.github.io/ngAnimate/ http://www.nganimate.org/angularjs/ng-repeat/move http://codepen.i ...