html – 如何仅通过CSS制作动态布局

概述我想创建一个这样的布局： >左列(黄色)：宽度150px常量 – 高度动态 >中间列(天蓝色)：宽度动态 – 高度动态 >右列(绿色)：宽度150px常量 – 高度动态 >页脚(红色)：宽度动态 – 高度常量 我正在寻找一个只有CSS的解决方案. jsFiddle here. http://fiddle.jshell.net/2bSaP/show/ HTML： <div id="container 我想创建一个这样的布局：

>左列(黄色)：宽度150px常量 – 高度动态
>中间列(天蓝色)：宽度动态 – 高度动态
>右列(绿色)：宽度150px常量 – 高度动态
>页脚(红色)：宽度动态 – 高度常量

我正在寻找一个只有CSS的解决方案.

jsFiddle here.

解决方法 http://fiddle.jshell.net/2bSaP/show/

HTML：

<div ID="container">    <div ID="yellow"></div>    <div ID="blue"></div>    <div ID="green"></div>    <div ID="red"></div></div>

CSS：

body {    margin: 0;}#yellow {    background: yellow;    position: absolute;    wIDth: 150px;    top: 0;    left: 0;    bottom: 155px;}#blue {    background: rgb(98,196,255);    position: absolute;    top: 0;    right: 155px;    left: 155px;    bottom: 155px;}#green {    background: green;    position: absolute;    wIDth: 150px;    top: 0;    right: 0;    bottom: 155px;}#red {    background: brown;    position: absolute;    height: 150px;    left: 0;    right: 0;    bottom: 0;}

总结

以上是内存溢出为你收集整理的html – 如何仅通过CSS制作动态布局全部内容，希望文章能够帮你解决html – 如何仅通过CSS制作动态布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。