HTML– 使用CSS进行布局(或者我应该放弃并使用表格？)

概述我试图实现以下布局,如截图所示.主要特点是>屏幕分为3个区域(列);>左/右列是固定宽度;>中间列根据浏览器宽度扩展>右列细分为两个区域>底部区域是固定尺寸,始终位于底部>顶部区域根据浏览器高度扩展使用HTML表格花了我大约2个小时来生成上面的截图,具有上述功能.在用CSS填充两天之后,我无法看到它如上所述,我对CSS和相

我试图实现以下布局,如截图所示.

主要特点是

>屏幕分为3个区域(列);
>左/右列是固定宽度;
>中间列根据浏览器宽度扩展
>右列细分为两个区域
>底部区域是固定尺寸,始终位于底部
>顶部区域根据浏览器高度扩展

使用HTML表格花了我大约2个小时来生成上面的截图,具有上述功能.

在用CSS填充两天之后,我无法看到它如上所述,我对CSS和相关屏幕截图的尝试如下：

CSS截图：
CSS尝试的问题是：
>中间col不扩展(鲑鱼色部分);
>相反,白色的颜色突然出现;
>总是不能让粉红色的区域留在底部
>不能让黄色区域上下拉伸
>不需要的包装(即右边区域位于左下方,中间区域)
因此,我即将使用表释放我的解决方案,除非一些顽固的CSS狂热者带着工作答案来解救:-)
更新
很棒的答案,在这次更新时有4个.我在firefox和Chrome上试用了所有4个,每个答案都可以接受.但我只能选择一个作为接受的答案,我将使用仅使用CSS和绝对定位(没有flexBox或css-tables)的简单而简单的那个.
非常感谢@matthewelsom,@ Pangloss,@Shrinivas,@ PaulIE_D;我相信任何偶然发现你的答案的人都会发现它对他们的用例很有用.为每个人投票,您的努力表示赞赏！
最佳答案看看这个fiddle.
它使用基本的CSS和HTML以及NO框架.
允许这种类型定位的关键元素是这些CSS属性：
左,右,上,下.
该演示使用这些属性.
这是片段.
body {  background: beige;  margin: 0;}#header {  wIDth: 100%;  height: 60px;  text-align: center;  background: #A7C942;  color: #fff;  Font-family: "Trebuchet MS",sans-serif;  Font-size: 2em;}#leftdiv {  position: absolute;  float: left;  wIDth: 150px;  top: 60px;  bottom: 0;  background: aquamarine;}#mIDdiv {  position: absolute;  float: left;  top: 60px;  bottom: 0;  left: 150px;  right: 365px;  min-wIDth: 50px;  background: lightsalmon;}#rightdiv {  position: absolute;  float: right;  wIDth: 365px;  top: 60px;  bottom: 0;  right: 0;  background: green;}#topRow {  position: absolute;  wIDth: 100%;  top: 0;  bottom: 50px;  min-height: 20px;  background-color: lightgoldenrodyellow;}#bottomrow {  position: absolute;  background-color: lightpink;  wIDth: 100%;  height: 50px;  bottom: 0;}
          总结       
以上是内存溢出为你收集整理的HTML  – 使用CSS进行布局(或者我应该放弃并使用表格？)全部内容，希望文章能够帮你解决HTML  – 使用CSS进行布局(或者我应该放弃并使用表格？)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1145366.html