程序员经验分享-hwhale

网页模板，其中内容占据视口的整个高度（如果有 1 行减去页脚）

2024-01-23

我正在寻找一个基于 CSS 的网页模板，其中主要内容div当其内容只有几行时，占据视口的整个高度（减去页眉和页脚高度）。页脚应该位于视口的底部，而不是内容的正下方，它更多地位于视口的中间。内容区域需要垂直扩展才能与页脚顶部连接。

如果内容需要比视口更多的空间，则页脚可以作为标准网页设计位于网页底部（而不是视口底部）。

感谢指向特定链接或示例代码的链接。不要提及模板网站并告诉我在那里进行搜索。必须至少在 IE 6 和 FF 中工作。如果需要JavaScript，只要浏览器不支持JS就可以，它默认将页脚放在内容区域的底部，不会破坏布局。

案例 #1 的草图：

--------------   <-----
header area  |         |
-------------|         |
small content|         |   
             |     view-port
             |         |
             |         |
-------------|         |
footer area  |         |
--------------   <-----


all other cases:

--------------   <-----
header area  |         |
-------------|         |
big content  |         |   
             |     view-port
             |         |           
             |         |
             |         |
             |         |
             |    <----      
             |         
-------------|         
footer area  |         
--------------

这里的例子：http://www.rossdmartin.com/aitp/index.htm http://www.rossdmartin.com/aitp/index.htm

更深入的资源：

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

html

css

网页模板，其中内容占据视口的整个高度（如果有 1 行减去页脚） 的相关文章

  • 为什么我可以在css中将gif设置为背景图片url()，但无法将视频mp4设置为背景url？

    为什么我可以在css中将gif设置为背景图片url 但无法将视频mp4设置为背景url 我尝试了一切 甚至将 url 设置为指向 svg 该 svg 中包含在 src 属性中编码为 base64 的异物视频 但行不通 我不需要 video

  • 缩小 HTML、CSS 和 Javascript 是一个坏主意吗？

    维基百科定义缩小 http en wikipedia org wiki Minification 28programming 29 as 从源代码中删除所有不必要的字符而不改变其功能的过程 这些不必要的字符通常包括空格字符 换行符 注释 有

  • YouTube 视频内容涵盖 IE < 9 中的 CSS 下拉菜单

    我使用 CSS 创建了下拉菜单 并将 YouTube 视频放置在导航栏下方的框中 使用 IE 8 时 下拉菜单落后于 YouTube 视频 尽管带有导航栏的 div 的 z index 比带有 YouTube 视频的 div 更高 该问题在

  • 强制浏览器重新加载index.htm

    通过在浏览器地址字段中输入 URL www mydomain com index htm 或仅 www mydomain com 并按 Enter 键 如何强制浏览器在加载页面时始终加载最新版本的 index htm 我正在 Chrome

  • CSS 中的分层图像 - 可以将 2 个图像放在同一个元素中吗？

    假设我在 CSS 中为网页设置背景图像 如下所示 body font size 62 5 Resets 1em to 10px font family Verdana Arial Sans Serif background color 9D

  • CSS 聚焦于出现的输入 div [重复]

    这个问题在这里已经有答案了 我有这样的代码 div class lighter div

  • 鼠标移动时画布拖动

    我正在尝试构建一个可以使用鼠标移动拖动的画布 我做了一些我无法理解的错误 因为一开始似乎有效 然后出现了一个增量错误 使画布移动得太快 考虑以下代码 window onload function var canvas document ge

  • 保证金如何运作？

    我在下面提供了marginfix这是一个块级元素并且one and two也是块级的 但它们是浮动的 这就是为什么它们位于同一行布局的原因 但是marginfix也不浮动 块级元素应位于该元素下方 如下所示

  • 如何使用 github 托管外部 CSS 文件？

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github

  • 如何将焦点设置在 BootStrap 中的第一个输入字段上？ [复制]

    这个问题在这里已经有答案了 可能的重复 如何将焦点设置到独立于 id 的 HTML 表单中的第一个输入元素 https stackoverflow com questions 277544 how to set the focus to t

  • 带有覆盖CSS的背景图像

    我如何在 CSS 中设计带有叠加层的背景图像 就像这个示例图像一样 这是代码 我想添加tour类到背景图像和叠加效果 div class tour div class container div class row div class co

  • iPhone 上的锁定方向 UIWebView

    有没有办法锁定 UIWebView 的方向 使用 Obj C JS 还是 Html 我不想有按钮或任何东西 我只想在应用程序打开时将其锁定为纵向 好像这个堆栈溢出帖子 https stackoverflow com questions 43

  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome

  • CSS以两种颜色显示一个字符[重复]

    这个问题在这里已经有答案了 css中是否可以用两种颜色制作单个字符 我的意思是例如字符 B 上半部分为红色 下半部分为蓝色 h1 font size 72px background webkit linear gradient red 49

  • 如何让php页面从html页面接收ajax post

    我有一个非常简单的表单 其中有一个名字输入字段 我捕获了表单数据 并使用标准 jQuery 发布方法通过 ajax 将其传输到 PHP 页面 但是 我根本无法从 PHP 页面获得任何在服务器端捕获数据的响应 我不确定我做错了什么或缺少什么

  • 浮动CSS属性导致父div不继承高度？

    我在 div 中有一个元素设置为float right但是 它会导致最外面的 div 不环绕 这是jsfiddle http jsfiddle net W792X 5 for it 我试图让提交按钮在 div 内浮动 但设置该属性似乎会导致

  • 如何在 CSS 中将容器内的多个 div 居中

    我正在测试像 Windows Metro 风格的中心分隔线 container height 300px width 70 background EEE margin 10px auto position relative block ba

  • 粘性背景图像/使用 CSS

    我目前正在创建我的第一个网站 并且即将完成 我在标题下为主体使用背景图像 我发现每个页面都有一个问题 因为它们的高度都不同 这使得我背景图像的当前设置放大图片以适合整个页面 我想做的是将背景图像设置为 粘性 我的想法是 背景图像将直接位于标

  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf

  • HTML5 地理定位 - 在 iOS 上无法始终工作

    目前正在使用 HTML5 地理定位 我已经在所有网络浏览器上测试了它 它似乎工作正常 然而 当我在 iPad 上测试地理定位时 它在 iPad mini 上始终有效 但当我将其放在更大的 iPad iPad 2 上时 位置似乎并不总是有效

随机推荐

  • htaccess 文件拒绝所有，重定向到 404 在 403.shtml 上找不到，但未定义自定义错误页面

    我正在 cPanel 中的新插件域中设置一个快速内部项目 这个特定的安装了 SSL 证书 我正在构建我的 htaccess 并添加了一个

  • bash - Shell 脚本打开多个终端并执行不同的命令[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我尝试编写自己的 shell 脚本 到目前为止 我已经成功打开了 4 个 xterminal 由于 hold 选项 它们只能执行一个命令 如

  • .NET Core 中的一对多关系数据播种

    我在将数据播种到我的数据库时遇到问题OnModelCreating method 我想为我的数据库添加种子国家 States and Cities但我不知道当他们有的时候该怎么做一对多关系 Models public class City

  • rsync 排除目录但包含子目录

    我正在尝试使用 rsync 将项目复制到我的服务器 我的子目录中有项目特定的安装脚本 项目 规格 安装 project1 我想做的就是排除其中的所有内容项目 规格目录 但项目特定的安装目录 项目 规格 安装 project1 rsync a

  • 我需要在 javafx 中创建后退按钮功能？

    我目前正在使用类似的东西将此代码绑定到 fxml javafx 按钮 Parent parent FXMLLoader load getClass getResource AolRun fxml Stage stage new Stage

  • ALV 报告填补了文档之间的空白

    我试图挑战自己制作一份按公司代码显示所有数据的 ALV 报告 但有些文件编号有差距 我想填补缺失号码之间的空白 例如 最后索引值 20012 那么下一个值是 20014 如果报表使用内表中存在的所有数据 如何在网格中插入 20013 Tha

  • 选择并 ForEach 列表 <> [重复]

    这个问题在这里已经有答案了 我对 C 很陌生 并尝试使用 lambda 表达式 我有一个对象列表 我想从列表中选择项目并对所选项目执行 foreach 操作 我知道我可以在不使用 lambda 表达式的情况下做到这一点 但想知道是否可以使用

  • 将无序列表的元组转换为 pandas DataFrame

    我正在使用图书馆usaddress从我拥有的一组文件中解析地址 我希望我的最终输出是一个数据框 其中列名称代表地址的一部分 例如街道 城市 州 行代表我提取的每个单独地址 例如 假设我有一个地址列表 addr 123 Pennsylvani

  • 如何修剪字符之间的空白

    如何删除C 中字符之间的空格 Trim 可用于删除字符串开头和结尾的空格 例如 C Sharp Trim 结果 C Sharp 但如何将字符串变成CSharp 我们可以使用删除空格for or a for each与临时变量一起循环 但是有

  • 页面加载后 Javascript 运行函数

    我正在尝试用 Javascript 创建一个小型自动化脚本 我想使用 Opera 的用户脚本功能来定义要运行的外部脚本 并在网站上运行该脚本 我之前曾使用此功能来运行我用外部站点编写的脚本 效果很好 我需要等到页面加载才能运行脚本 但我似乎

  • python csv问题[重复]

    这个问题在这里已经有答案了 我只是在 python 中测试 csv 组件 但遇到了一些问题 我有一个相当标准的 csv 字符串 默认选项似乎都适合我的测试 但结果不应该将 1 2 3 4 连续分组 将 5 6 7 8 连续分组 非常感谢您提

  • Snowflake Python Pandas 连接器 - 使用 fetch_pandas_all 时出现未知错误

    我正在尝试使用 python pandas 连接器连接到雪花 我在 Windows 上使用 anaconda 发行版 但卸载了现有的连接器和 pyarrow 并使用此页面上的说明重新安装 https docs snowflake com e

  • Netbeans 热键关闭突出显示的搜索文本？

    我用谷歌搜索过这个问题 但没有找到 如果您知道如何操作 请分享 对于 7 0 工具 gt 选项 gt 键盘映射 gt 切换突出显示搜索 我的是 Alt Shift H

  • 如何在WCF中设置cookie并在调用Ajax的成功函数（或其他地方）中读取它

    我有一些 jQuery JavaScript 调用一个简单的 WCF Web 服务 对我来说 在 JavaScript 中设置 cookie 并在服务器端读取它相当容易 这是该代码 客户端 JavaScript document cooki

  • 如何在 TypeScript 中从界面中排除某个键

    在 TypeScript 中 您可以像这样组合两种接口类型 interface Foo var1 string interface Bar var2 string type Combined Foo Bar 我不想组合键 而是想将键从一个接

  • Mercurial qfold 所有补丁？

    结果发现没有hg qfold a I tried hg qfold hg qunapp and hg qunapp xargs hg qfold但无法让它发挥作用 有任何想法吗 通过您的 xargs 方法 您是否还记得 qfold 只能折叠

  • 计算多维数组中的重复值

    我需要计算多维数组中的相同值并删除重复项 我的阵列 r a b a b c d c d c d e f 需要输出 0 gt Array 0 gt a 1 gt b 1 gt 2 Result 1 gt Array 0 gt c 1 gt d

  • 为什么允许访问另一个对象的私有字段？

    最近 我观察到在 Java 中访问 priavte 字段的意外行为 考虑以下示例 该示例说明了该行为 public class A private int i lt private field public A int i this i i

  • 如何创建指向同一文件的 Doxygen 链接

    我想编写一条 Doxygen 注释来命名出现注释的文件 我希望 Doxygen 为我提供文件名 而不是显式地编写文件名 因此 如果我更改文件的名称 或将某些内容移动到不同的文件中 我不需要更改名称的硬编码实例 举一个具体的例子 假设我要向

  • 网页模板，其中内容占据视口的整个高度（如果有 1 行减去页脚）

    我正在寻找一个基于 CSS 的网页模板 其中主要内容div当其内容只有几行时 占据视口的整个高度 减去页眉和页脚高度 页脚应该位于视口的底部 而不是内容的正下方 它更多地位于视口的中间 内容区域需要垂直扩展才能与页脚顶部连接 如果内容需要比

热门标签