程序员经验分享-hwhale

使用 CSS 网格将页脚置于视图之外

2023-11-29

我有一个 70 像素高的标题，我想要填充屏幕其余部分的主要内容，然后是 70 像素的页脚。我试图找到隐藏页脚的最简单方法。这适用于footer在视图中 - 看到jsfiddle和下面的片段：

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  height: 100vh;
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px auto [footer] 70px;
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  grid-row: 3;
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>

但我想将其推离屏幕，这样我就可以在需要时使用按钮来显示。我尝试过使用grid-template-rows: [header] 70px calc(100vh - 70px) [footer] 70px这确实给了我我想要看到的效果jsfiddle和下面的片段：

* {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  height: 100vh;
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px calc(100vh - 70px) [footer] 70px;
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  grid-row: 3;
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>

但问题是，如果我使用grid-gap: 10px我必须 计算出在grid-template-rows如果我添加的话就会变得混乱 更多部分。

例如，3个部分将有2个间隙，如果我将间隙设置为10px，则总数将为20px，加上页脚的70px，即总共为90px。如果有人接管了代码，他们需要知道他们需要手动将其添加到grid-template-row我知道会错过的线路。有人有一个我缺少的简单想法吗？


您可以删除您的footer来自显式网格（改变你的显式网格行定义为grid-template-rows: [header] 70px 1fr并删除grid-row: 3 from footer）并设置网格容器高度至calc(100vh + 70px)并设置隐式网格行（这是你的footer高度）使用grid-auto-rows: 70px.

请参阅下面的演示普通CSS:

* {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  height: calc(100vh + 70px); /* adding footer height */
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px 1fr; /* removed footer from here */
  grid-auto-rows: 70px; /* implicit grid height - footer height */
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  /*grid-row: 3;*/
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>

但你又必须做这些混乱的计算当新部分添加到网格时。一个更多动态选项就是要保留一个网格项（零宽度adjuster下面演示中的元素）仅用于设置布局高度：

  • 放置在第一列中并且横跨前两行

  • has height: 100vh设置并推到后面z-index: -1这样就不会影响布局。

请参阅下面的演示：

* {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px 1fr; /* removed footer from here */
  grid-auto-rows: 70px; /* implicit grid height - footer height */
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  /*grid-row: 3;*/
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}

.adjuster { /* grid items spanning two rows with explicit height set */
  width: 0;
  position: relative;
  z-index: -1;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 100vh;
}

section { /* new sections added*/
  background: cadetblue;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>
<!-- height adjuster for viewport -->
<span class="adjuster"></span>
<!-- other page sections below -->
<section></section>
<section></section>

摘录于implicit and explicit来自 MDN 的网格：

The implicit and explicit grid (MDN)

如果您将某些内容放置在定义的网格之外，或者由于 内容量越大，需要更多的网格轨道——然后网格创建 中的行和列隐式网格。这些轨道将自动调整大小 默认情况下，导致它们的大小基于内容 在他们里面。

您还可以为隐式网格中创建的轨迹定义设定大小 与grid-auto-rows and grid-auto-columns特性。

您可以阅读更多有关显式和隐式网格 here: CSS Grid 自动添加不需要的列

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

html

css

sass

cssgrid

使用 CSS 网格将页脚置于视图之外 的相关文章

  • 如何将表格中的td高度设置为0px？

    我有一个包含几行的 HTML 表 这是动态构建的 全部 tr 有一个 td inside If one td 里面没有 HTML 内容 我希望它是不可见的 如何才能做到这一点 并不是说里面的 HTML 是动态渲染的 我不想使用display

  • 自动调整Google网站嵌入代码的高度（html）

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协

  • 当鼠标悬停在伪元素上时触发CSS动画？

    我试图在伪元素悬停时触发 CSS 动画 我目前有 2 个视频 显示鼠标悬停在浏览器的 50 一侧 我想应用类似的效果来为某些文本添加动画效果 我想要 p 标签在移动时向上移动并淡入 p h1 同时以同样的方式标记 就像这个网站一样 http

  • 使用日语“Enter”键进行搜索功能

    我在日语方面遇到了问题 我有一个允许用户搜索数据的表单 当用户输入要搜索的字符串并按 Enter 键时 搜索功能就会执行 我的代码是 formSearch input keyup function event var key event c

  • 在 javascript、jQuery 或 css 中，如何让 div 或 iframe 展开以填充其余空间

    我有三个 iframe 我将顶部 iframe 设置为 50px 高度 将底部 iframe 设置为 50px 但我希望中间 iframe 扩展以填充其余空间 有没有一种技术可以用来对任何窗口屏幕尺寸执行此操作 谢谢 example

  • 如何删除flexbox中所有换行行的左右边距（没有nth-child或js）

    我正在寻找一种好方法来删除每行中每个第一个和最后一个项目的左右边距 而不使用 nth child 或 JavaScript 如果这是不可能的 那么我想下一个最好的方法是在主弹性盒元素上设置负左 右边距 但我不太确定使用弹性盒来做到这一点的最

  • html 表格单元格的条件格式

    是否有现成的解决方案可以对 HTML 表格进行条件格式设置 通过条件格式 我更感兴趣的是根据该列或其他列 在同一个表中 的值 数字 将不同的颜色作为单元格背景 类似于我们在 Excel 条件格式 gt 色阶 gt 红黄绿中的内容 我想在通过

  • 如何仅在 css/html 中强制在单词之间换行？

    我只有一段普通的文本 p 标签内的 p div 标签 但只有 Firefox 可以正确显示 Firefox 打破了单词之间的界限 所有其他浏览器都会在单词中间断行 这使得阅读变得困难 这是我的意思的一个例子 火狐浏览器 工作中 This w

  • 如何向 Rails 应用程序添加自定义字体？

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底

  • 同页锚链接到部分 id 在 IE8 中不起作用

    我有一个带有导航的单页 HTML5 网站 可以将用户引导至该部分 在除 IE8 之外的所有浏览器中都可以正常工作 IE8 不执行任何操作 我所拥有的虚拟版本 a href about About a a href work Work a a

  • IE 中的 HR 标签 - 删除边框

    在除 IE7 及更低版本之外的其他浏览器中 hr 在 hr 标签周围显示边框 但我不希望它出现 我已经尝试过这个解决方案 但它周围似乎仍然有边框 它看起来像这样 我该如何摆脱它 See http webdesign about com od

  • 循环遍历元素并逐步为每个元素应用 CSS 规则

    我有一个网格布局 每个网格布局中都有不同数量的元素 我想动态添加内联grid column通过循环遍历 div 中存在的每个元素的 CSS 规则 ul 与一类 list 所以 HTML 代码的输出需要是 ul class list ul u

  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi

  • 淘汰赛绑定，每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div

  • 为什么将 x 和 y 设置为 0 时 svg 文本会消失？

    我刚刚开始阅读有关svg我提出了以下问题 我正在创建一个简单的svg with a text里面如下图所示 从我的阅读中我了解到x and y of the text标签声明文本在标签内的位置svg space 为什么当我同时设置x and

  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其

  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2

  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目

  • HTML 元素的默认背景颜色是什么？白色还是透明？

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co

  • 如何强制外部 div 扩展到内部 div 的高度？

    我有 ajax 到的数据 div class content 我希望外部 div 扩展到内部 div 的高度 我不知道该怎么做 HTML div class outer div class inner div class content S

随机推荐

热门标签