程序员经验分享-hwhale

填充可用空间的 CSS 布局

2023-11-23

我正在尝试做一个看似简单的网页布局，但我遇到了困难。

I'd like做一切事纯粹用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)

……结论似乎是没有一个好的解决方案。这些答案有点旧了，所以我希望现在有人知道这个技巧。

是的，我知道使用<table>，在“用头撞墙”之后，我实际上尝试使用表格来实现布局。不幸的是，通过这种方法，我无法让中心部分显示滚动条（使用overflow: auto）当内容变得太大时。）


怎么样THIS?
它适用于 konqueror (KHTML)、chrome (webkit) 和 firefox (gecko)。就像最近的任何东西一样，它可能会在 IE6 下崩溃。

    <html><body style="margin: 0; padding: 0;">
    <div style="position: absolute; background: #faa; 
                height: 100px; top: 0px; width: 100%;">header</div>
    <div style="position: absolute; background: #afa; 
                top: 100px; bottom: 100px; left: 0; width: 100px;">left</div>
    <div style="position: absolute; background: #afa; 
                top: 100px; bottom: 100px; right: 0; width: 100px;">right</div>
    <div style="position: absolute; background: #faa; 
                height: 100px; bottom: 0px; width: 100%;">footer</div>
    <div style="position: absolute; background: #aaf; 
                bottom:100px; left: 100px;top: 100px;right: 100px; overflow: auto;">
    <p>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.</p>


    <p>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.</p>

    <p>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.</p>

    <p>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.</p>

    <p>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.</p>

    </div>
    </body></html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

html

填充可用空间的 CSS 布局 的相关文章

  • 如何在jqplot中显示饼图之外的标签？

    Jqplot 有如下图表 jqplot 图表 http www jqplot com tests pie donut charts php 我的问题是如何在 a 之外显示标签jqplot chart像下面这样high chart 高图表可以

  • 如何在文本区域中使用除“文本插入符号”之外的透明字体？

    我有一个简单的文本区域 我需要制作透明字母 同时允许文本插入符可见 当我应用以下规则时 我会得到隐形插入符 textarea background transparent opacity 0 当我键入不可见文本时 我需要看到文本插入符移动

  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载！仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr

  • 将父容器扩展至 100% 高度以容纳浮动内容

    我正在为一个客户项目而苦苦挣扎 我的全部divs 没有绝对定位 height 100 for html body 和容器divs 但静态内容未达到其内容 在 910 像素处 我可以将溢出属性更改为auto 并且背景会继续向下到内容的末尾 但

  • 设置浏览器窗口最小化的最小尺寸限制？

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用

  • JSF 2.1 中的 HTML 4 <按钮>

    我想使用以下命令 The JSF

  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px

  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31

  • 对一组复选框使用 HTML5“必需”属性？

    使用支持 HTML5 的较新浏览器 例如 FireFox 4 时 并且表单字段具有属性required required 并且表单字段为空 空白 然后点击提交按钮 浏览器检测到 必填 字段为空 并且不提交表单 相反 浏览器会显示一条提示 要

  • 如何隐藏 URL 中的锚标记

    如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli

  • 如何使用canvas.toDataURL()将画布保存为图像？

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J

  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使

  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r

  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t

  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如

  • 为范围旋钮 ionic-range 添加边框颜色

    我正在使用离子范围添加范围滑块 并想向范围旋钮添加边框 由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分 我无法使用范围旋钮的 border 属性直接更改边框 我已附上我想要实现的图像 范围旋钮周围有白色边框 现有属性只

  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG

  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react

  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas

  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4

随机推荐

  • 使用curl上传多个文件

    如何使用数组上传多个文件CURLFile and curl setopt 使用数据数组 因为它会抛出错误 无法将数组转换为字符串 并且http build query上的数据会损坏CURLFile对象 我必须上传的数据如下所示 mode g

  • 使用 Bootstrap 折叠插件进行 Javascript 切换

    我尝试以编程方式使用 Bootstrap 折叠插件的切换功能 当我单击手风琴标题中的链接时 我设法切换 div 但它只能工作一次 也就是说我无法再次单击来隐藏 div 这是我的代码 div class accordion div class

  • 下载前 1000 字节

    我需要使用 C 从互联网下载文本文件 文件大小可能相当大 而我需要的信息始终在前 1000 字节内 这可能吗 被盗自here string GetWebPageContent string url string result string

  • 如何为每个组选择固定行数？

    这是 mysql 表中的一些示例数据 a b distance 15 44 250 94 31 250 30 41 250 6 1 250 95 18 250 72 84 500 14 23 500 55 24 500 95 8 500 5

  • Python 全局变量和类功能

    我正在创建一个简单的 python 程序 它提供 SMS Inbox 的基本功能 我创建了一个 SMS Inbox 方法 store message count 0 class sms store def add new arrival s

  • 如何在使用单个测试项目时将所有 QtTestLib 单元测试结果组合到单个文件中？

    在我们的项目中 我们使用 QtTestLib 进行单元测试 原因是整个项目已经尽可能使用Qt 并且它是一个GUI应用程序 所以我们希望具有测试GUI界面的能力 我们的项目是由 MSVC 编译的 因此我们不想为每个测试都有一个单独的项目文件

  • 从数组中获取过滤后的值（范围为 10-20 之间的值）

    如何获得过滤值来自范围 10 20 之间的类似数组的值 我的数组包含 10 15 18 25 88 20 我只想打印 10 20 范围内的内容 use array intersect with range input array 10 15

  • 将 pandas 数据帧转换为 utf8

    如何将 pandas 数据帧转换为 unicode messages pandas read csv data SMSSpamCollection sep t quoting csv QUOTE NONE names label messa

  • JS/HTML5 WebSocket：无需 HTTP 调用即可连接

    好吧 我刚刚尝试了 HTML 5 中的新 WebSocket 类 并且对它们的存在感到非常兴奋 然而 我看不出它们比 AJAX 更有价值 因为它们仍然发起 HTTP 调用并且not就像传统的插座一样 这就是我在这里问的原因 有没有办法使用

  • Android Room + 窗口功能

    我尝试在房间查询中使用窗口函数 解析器抱怨我的查询 我只是尝试在 select 语句中添加 ROW NUMBER OVER ORDER BY column 表达式 如果没有此表达式 查询将正确运行 解析器错误 extraneous inpu

  • 我可以检测浏览器中可用的 async/await 吗？ [复制]

    这个问题在这里已经有答案了 如标题 如何检测浏览器中的 async await es7 支持 那可能吗 与任何其他语法特征一样 应该对其进行评估才能被检测到 自从eval可以被限制 当启用 CSP 时这可能是不可能的 let isAsync

  • 如何有条件地导入 xslt 中的样式表？

    有没有办法在检查某些条件后导入样式表 例如 如果变量 a 的值 1 则导入 1 xsl 否则导入 2 xsl 大家好 请问有什么办法可以导入吗 检查一些样式表后 状况 就像 如果变量 a 的值 1 然后导入 1 xsl 或者导入 2 xsl

  • node_modules 未被识别为内部或外部命令

    我正在尝试使用 appium jasmine 和 Perfecto mobile 编写测试自动化脚本 我正在使用从以下 URL 克隆的项目和我自己的配置Appium JavaScript 示例 问题是当我执行npm test命令我收到以下错

  • 从单独的路由文件内部访问快速“应用程序”对象的最佳方法是什么？

    在 Express 4 中 默认情况下 路由是从单独的文件加载的 app use routes 将加载routes index js 我有一个附加到的第三方库app本身 是否有首选的访问方式app从内部routes index js 我考虑

  • 关闭呈现的视图控制器

    我有一个理论问题 现在我正在阅读苹果的视图控制器 guide 他们写 当需要关闭呈现的视图控制器时 首选方法是让呈现视图控制器关闭 它 换句话说 只要有可能 同一个视图控制器 提出视图控制器还应该负责 驳回它 尽管有多种方法可以通知 呈现视

  • glibc 的 fprintf() 实现是线程安全的吗？

    fprintf 是线程安全的吗 glibc 手册似乎是这样 但我的应用程序使用对 fprintf 的单个调用写入文件似乎混合了来自不同进程的部分写入 编辑 澄清一下 有问题的程序是lighttpd插件 并且服务器正在运行多个工作线程 查看该

  • Symfony 手动连接参数 - 'arguments' 与 'bind'

    我尝试找出如何手动注入参数DefaultController 没有自动装配 我发现有两种方法可以实现这一目标 我可以用arguments services defaults autowire false autoconfigure true

  • 使用 LIKE 搜索 GROUP_CONCAT

    我有一个 SQL 查询 它使用 GROUP CONCAT 让所有人附加到某个订单 有没有办法可以在 GROUP CONCAT 字段内进行搜索 SELECT orders orderID GROUP CONCAT contacts first

  • 结构解引用运算符（运算符->）

    我正在为迭代器编写一个薄模板包装器 在通过结构取消引用运算符时遇到了绊脚石 主要是因为指针没有 include

  • 填充可用空间的 CSS 布局

    我正在尝试做一个看似简单的网页布局 但我遇到了困难 I d like做一切事纯粹用CSS 没有桌子把事情搞砸 并且没有 JavaScript动态调整事物的大小 我想要 具有固定高度的标题 固定高度的页脚 具有固定宽度的左侧边栏 具有固定宽度

热门标签