从网上转的。

<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. iPhone X进入DFU模式

    下面把iphoneX进dfu模式的方法分享给大家.在开机状态下,按一下音量加键后松开,然后按一下音量减键后松开,接着按住电源键,屏幕完全熄灭后,松开电源键,接着同时按住电源键和音量减,保持5秒左右,再 ...

  2. mac 安装npm

    npm是什么 NPM的全称是Node Package Manager ,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准. 如何安装 一:如果你安装了Homebrew ...

  3. Java动态代理学习

    动态代理类 Java动态代理类位于java.lang.reflect包下,一般主要涉及到以下两个类: 1.Interface InvocationHandler 该接口中仅定义了一个方法: Objec ...

  4. 二进制包 vs. 源代码包

    在ROS中, 我们可能经常会遇到缺少相关的ROS依赖的问题. 有些时候你编译或者运行一些ROS程序, 系统会提示找不到XXX功能包. 如果是缺少ROS的依赖, 通常可以用以下命令来安装: $ sudo ...

  5. 【转】Android 4.0 Launcher2源码分析——启动过程分析

    Android的应用程序的入口定义在AndroidManifest.xml文件中可以找出:[html] <manifest xmlns:android="http://schemas. ...

  6. java 学习 命令行运行java程序

    之前学习python,由于公司需要.现在不得已转java. 1.命令运行java程序. 程序名字:input.java code: /** * Created by liumeide on 2017/ ...

  7. 1、Orcal下载安装步骤图文详解

    1.Orcal官方下载地址: https://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/index.htm ...

  8. 【CSS3】特殊的属性归纳（一）

    CSS3手册地址速查表 -webkit- 最终要用兼容性写法 (一)-webkit-tap-highlight-color    (mobile移动设备私有属性) 案列: 问题:遇到a链接和butto ...

  9. UNIX网络编程之旅-配置unp.h头文件环境

    最近在学习Unix网络编程(UNP),书中steven在处理网络编程时只用了一个#include “unp.h”  相当有个性并且也很便捷 于是我把第三版的源代码编译实现了这个过程,算是一种个性化的开 ...

  10. oracle 数据库更新 新增 修改 删除

    数据增加 INSERT INTO 表名称 [(字段,字段,...)] VALUES (值,值,...) ; 考虑到日后代码的可维护性,一定要使用完整的语法进行数据的增加. 数据修改 UPDATE 表名 ...