填充可用空间的CSS布局

作者：个性2402852463 | 2023-07-17 11:54

如何解决《填充可用空间的CSS布局》经验，为你挑选了1个好方法。

我正在尝试做一个看似简单的网页布局,但我正在打一堵墙.

我喜欢做的一切与CSS纯粹的(没有表到事情搞砸的时候,并没有JavaScript的动态调整的东西)

我想:

具有固定高度的航向

一个高度固定的页脚

左侧边栏有固定宽度

右侧边栏有固定宽度

整个布局始终填充整个视口(即,如果用户调整窗口大小,则布局增长到新大小)

换一种方式:


|<                Total width is 100% of viewport             >|

+--------------------------------------------------------------+  ---
|                 Header with a fixed height                   |   ^
|--------+-------------------------------------------+---------+    
|        |                                           |         |    
|        |                                           |         |    
|  Left  |                                           |  Right  | Total
|  with  |        Center grows in height/width       |  with   | height
|  fixed |      and has scrollbars if necessary      |  fixed  | is
|  width |                                           |  width  | 100%
|        |                                           |         | of
|        |                                           |         | viewport
|        |                                           |         |  
|--------+-------------------------------------------+---------|   
|                 Footer with a fixed height                   |   v
+--------------------------------------------------------------+  ---

给我带来最大麻烦的部分是

侧边栏和中心的高度等于视口的高度减去页眉和页脚的高度

使中心的宽度等于视口宽度减去两个侧边栏的宽度

我没有问题要求用户拥有现代浏览器.

我知道之前已经提出了类似的问题,例如

div填充剩余空间(http://stackoverflow.com/questions/1717564)

三行无表格CSS布局,中间行填充剩余空间(http://stackoverflow.com/questions/1703455)

创建2个div,一个占用剩余空间(http://stackoverflow.com/questions/1717564)

......结论似乎是没有一个好的解决方案.那些答案有些陈旧,所以我希望有人知道这个诀窍.

是的,我知道这对于使用a来说似乎是微不足道的

,在"撞到我的头撞墙"之后,我确实尝试使用表来实现布局.不幸的是,使用这种方法,overflow: auto当内容变得太大时,我无法让中心部分显示滚动条(使用).)

1> Peter Carrer..：

这个怎么样？
它适用于konqueror(KHTML),chrome(webkit)和firefox(gecko).像最近的任何事情一样,它可能会在IE6下进行.

header
left
right
footer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt tempor
velit quis volutpat. Nulla pharetra pulvinar arcu sed lacinia. Nulla ultrices aliquet sem,
vitae commodo elit condimentum ut. Nulla consectetur facilisis nibh, et tempus purus
pellentesque nec. Ut eu nibh ut arcu mattis luctus. Cras at interdum quam. Pellentesque
imperdiet mi vitae felis sollicitudin iaculis. Maecenas accumsan tortor neque, at posuere
felis. Quisque ultricies mi quis dolor pellentesque elementum. Maecenas quis nunc tortor.
Cras eu velit faucibus nulla volutpat mollis. Aliquam fermentum lobortis diam ut pharetra.
Duis mattis posuere fringilla. Morbi consectetur mauris vel libero pellentesque varius.
Aenean leo enim, placerat a feugiat nec, ultrices et nulla. Etiam tincidunt urna id justo
molestie faucibus. Cras neque enim, semper et sodales eu, volutpat nec urna. Vestibulum
interdum arcu et ante egestas ut lacinia dui semper. Cras ligula lacus, aliquet nec dapibus
ac, commodo vitae libero. In gravida venenatis sapien a convallis.

Nulla ac risus eu velit pulvinar pretium. Etiam porttitor viverra sollicitudin.
Donec lectus mi, posuere quis luctus facilisis, lacinia non ante. Sed sed mi neque. Etiam
neque risus, bibendum et tincidunt vel, pharetra nec risus. In hac habitasse platea
dictumst. Nam sollicitudin condimentum lorem, quis dignissim turpis sagittis nec.
Pellentesque diam nunc, rhoncus quis lobortis id, lacinia quis lorem. Maecenas tempor metus
nec velit facilisis in rhoncus lectus varius. Integer mollis, odio ut pharetra varius, elit
nulla pellentesque neque, a egestas est justo dapibus neque. Vivamus a mauris massa, sit
amet commodo orci. Aliquam nec iaculis sapien. Suspendisse ornare, tortor eget mattis
tempus, nulla ligula fermentum elit, vitae euismod odio metus ac risus. Etiam iaculis
dignissim consectetur. Nunc molestie lorem ac neque pulvinar vitae eleifend justo
facilisis.

Duis a sem turpis, et cursus arcu. Suspendisse potenti. Sed eu risus orci, eget
bibendum justo. Praesent dapibus porttitor mauris, ac sollicitudin eros pretium quis.
Curabitur mi eros, aliquam et ultrices et, adipiscing ut mauris. Nunc pretium malesuada nisi
laoreet consectetur. Phasellus mi arcu, rutrum in blandit in, consectetur non risus.
Vestibulum enim lacus, aliquam eu ultrices a, tempor ut turpis. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur rhoncus faucibus sapien, quis vulputate eros tempus
consequat. Vivamus id metus massa. Vivamus aliquet enim quis sem viverra eu molestie elit
cursus.

Mauris at lorem massa. Aliquam risus ligula, vestibulum et placerat condimentum,
pellentesque sit amet justo. Cras tempor sollicitudin ultrices. Aliquam sed elit sapien.
Praesent consectetur molestie vehicula. Pellentesque quis lectus et nunc accumsan feugiat.
Ut rhoncus aliquet libero sed rhoncus. Fusce egestas nunc eu elit vestibulum placerat. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Phasellus vitae nisi ante, id fermentum justo.

Donec iaculis magna nec elit fringilla imperdiet. Proin mauris sem, pellentesque sed
ultrices ac, luctus ac elit. Donec blandit, orci ac volutpat luctus, turpis sem malesuada
tellus, eget porta magna nisi vitae quam. In vitae scelerisque urna. Proin ante odio,
ultrices lobortis scelerisque at, dictum non justo. Pellentesque tincidunt congue leo
malesuada ullamcorper. Quisque dapibus, massa dignissim gravida blandit, augue felis
vehicula urna, et ullamcorper turpis orci sit amet nibh. Ut vitae consequat nibh.
Pellentesque turpis justo, ultrices ac porta in, pretium quis quam. Donec purus nisi,
dignissim vitae hendrerit vel, hendrerit ac sapien. Fusce facilisis purus a libero elementum
ultrices. Nunc in libero congue ipsum tempor suscipit. Pellentesque pharetra pretium
volutpat. Nam sapien arcu, viverra vitae euismod sit amet, mollis nec arcu. Phasellus at
elit metus, sit amet tempus turpis. Phasellus mattis justo ut est varius facilisis ut et
leo. Phasellus congue cursus est eget luctus. In eleifend diam at enim ultricies a lacinia
mauris molestie. Nunc porttitor bibendum vulputate. Pellentesque quis risus vel mi
pellentesque imperdiet vitae ac nunc.

推荐阅读

程序员
无法手动关闭matplotlib绘图窗口

如何解决《无法手动关闭matplotlib绘图窗口》经验，为你挑选了2个好方法。 ... [详细]
程序员
RxJS比较最后并发出

如何解决《RxJS比较最后并发出》经验，为你挑选了1个好方法。 ... [详细]
程序员
ios - 动态编辑3d触摸快捷方式列表

如何解决《ios-动态编辑3d触摸快捷方式列表》经验，为你挑选了1个好方法。 ... [详细]
程序员
BrowserLink MVC 6 - 不工作 - 没有注入额外代码

如何解决《BrowserLinkMVC6-不工作-没有注入额外代码》经验，为你挑选了0个好方法。 ... [详细]
程序员
Golang程序挂起而没有完成执行

如何解决《Golang程序挂起而没有完成执行》经验，为你挑选了1个好方法。 ... [详细]
程序员
在概念定义中,是否允许在需求表达式之外的替换失败？

如何解决《在概念定义中,是否允许在需求表达式之外的替换失败？》经验，为你挑选了0个好方法。 ... [详细]
程序员
通过ParseForm()检索表单选项id

如何解决《通过ParseForm()检索表单选项id》经验，为你挑选了1个好方法。 ... [详细]
程序员
Symfony2无法加载类型EntityType

如何解决《Symfony2无法加载类型EntityType》经验，为你挑选了2个好方法。 ... [详细]
程序员
printf bash - 在标记包围的现有行的中间打印文本

如何解决《printfbash-在标记包围的现有行的中间打印文本》经验，为你挑选了1个好方法。 ... [详细]
程序员
如果450KB base64编码,数据的文件大小是多少？

如何解决《如果450KBbase64编码,数据的文件大小是多少？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Rspec allow_any_instance_of返回实例ID

如何解决《Rspecallow_any_instance_of返回实例ID》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何使用数组在div上按顺序获取颜色

如何解决《如何使用数组在div上按顺序获取颜色》经验，为你挑选了1个好方法。 ... [详细]
程序员
在Windows 10主页中设置Composer路径变量

如何解决《在Windows10主页中设置Composer路径变量》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用FileReader（Web API）在浏览器中读取大文件

如何解决《使用FileReader（WebAPI）在浏览器中读取大文件》经验，为你挑选了1个好方法。 ... [详细]
程序员
Bash参数扩展 - 获取文件的直接父目录

如何解决《Bash参数扩展-获取文件的直接父目录》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何给lambda中的运算符添加空间？

如何解决《如何给lambda中的运算符添加空间？》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何使这个字符串替换代码与`<br/>`标签一起使用？

如何解决《如何使这个字符串替换代码与`<br/>`标签一起使用？》经验，为你挑选了0个好方法。 ... [详细]
程序员
在admin中保存新模型时,表"django_admin_log"上的插入或更新违反了外键约束

如何解决《在admin中保存新模型时,表"django_admin_log"上的插入或更新违反了外键约束》经验，为你挑选了1个好方法。 ... [详细]
程序员
是什么使WSGI本质上是同步的？

如何解决《是什么使WSGI本质上是同步的？》经验，为你挑选了1个好方法。 ... [详细]
程序员
嵌入在UIWebView中的Youtube视频在真实设备上没有声音

如何解决《嵌入在UIWebView中的Youtube视频在真实设备上没有声音》经验，为你挑选了3个好方法。 ... [详细]

个性2402852463

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章

DevBox开发工具箱 | 专业的在线开发工具网站