从网上转的。

<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. ES6新特性6：模块Module

    本文摘自ECMAScript6入门,转载请注明出处. 一.Module简介 ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能 ...

  2. [转]C结构体之位域（位段）

    有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一个开关量时,只有0和1 两种状态, 用一位二进位即可.为了节省存储空间,并使处理简便,C语言又提供了一种数据结构 ...

  3. 域对象 request

    一)域对象: 1)request的生命周期: 从请求开始创建,到响应完成结束. 2)  作用:携带一次请求内的数据. 3)请求转发: 请求转发: 1)浏览器发送请求到服务器A,然后服务器A将请求转发到 ...

  4. jenkins+pytest+ allure运行多个py文件测试用例

    jenkins的pytest运行多个py文件,导出allure报告方法,只需改下job的配置中的构建即可(pytest会运行指定文件下的所有test开头的py文件),如下:              ...

  5. 关于CodePlex

    CodePlex是微软的开源工程网站,涉及诸多微软最新技术的开源工程. 网址:http://www.codeplex.com/ 应常去看看.

  6. ios开发UI篇--UIStepper

    概述 UIStepper用于增加或减少值的控件. 属性和方法 初始化方法 UIStepper *stepper = [[UIStepper alloc] initWithFrame:CGRectMak ...

  7. iOS与硬件通讯（socket，data拼接，发送指令，解析指令）

    最近项目中用到了iPad驱动硬件来工作,也就是智能硬件的实现.下面简单说下原理,详细说下socket,wifi通信,数据处理接收,发送,以及数据解析代码. 首先,来说下通信.因为硬件部件比较多,我们采 ...

  8. Scala-构造函数

    /*scala的构造函数分为主构造函数和辅助构造函数. 一.主构造函数在Scala中,每个类都有主构造函数,和类的定义交织在一起.一个Scala类的主构造函数包括:1.构造函数的参数:2.类体中调用的 ...

  9. 用NI的数据采集卡实现简单电子测试之2——绘制三极管输出特性曲线（面）图

    本文从本人的163博客搬迁至此. 想设计几个实验,既能展示NI的LabVIEW和数据采集卡的功能特点,又能够让普通电类专业本科学生可以理解,自然首先想到了<电子技术基础>课程的内容.第一个 ...

  10. OpenCV学习系列（零） Mac下OpenCV + xcode环境搭建

    # OpenCV学习系列(零) Mac下OpenCV + xcode环境搭建 [-= 博客目录 =-] 1-学习目标 1.1-本章介绍 1.2-实践内容 1.3-相关说明 2-学习过程 2.1-hom ...