javascript - 如何使用 CSS 构建此布局?

标签 javascript html css xhtml layout

我不是 CSS 的新手,但这对我来说是个问题,我无法解决。我需要构建如下布局:

Layout

位于底部和顶部的 Div 具有固定的高度。中间的高度必须正好在 PAGE HEIGHT - DIV 1 HEIGHT - DIV 3 HEIGHT 的高度,或者在某些情况下更小。

它也必须设置这个大小,因为我预测有时它的内容会比它大,然后它里面需要一个滚动条。

我会接受 DIV2 变小的情况,但绝不会太大而无法适应 DIV1 和 DIV3 的页面大小。

任何解决方案都会很好,不仅使用 CSS,而且如果您有想法,您也可以抛出一些 Javascript...我将不胜感激任何解决方案...即使不完全正确 :)

最佳答案

我相信你想要这样的东西

<div id="header" style="position:absolute; top:0px; left:0px; height:200px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; overflow:hidden;"> 
</div> 

关于javascript - 如何使用 CSS 构建此布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3344825/

相关文章:

javascript设置宽度尺寸更改元素位置

javascript:捕获元素名称和元素的字符串值的语法

javascript - 在 JQuery 中使用一键打开/关闭的问题

html - Bootstrap pull-right 导致元素重叠

css - 堆叠多个 CSS 渐变

html - 为什么我的三个按钮是垂直的而不是水平的?

javascript - 正确寻址js-xlsx中xlsx的内容并对其进行操作

javascript - jQuery 从浏览器检测最大化和恢复按钮

html - css 最大高度里面的最大高度

jquery - 内边框半径不起作用