CSS网格粘滞/固定在英雄区域下的导航

文章/答案/技术大牛

发布

1回答

html、css、css-grid

我的CSS网格设计https://codepen.io/AnonymousCaptain/pen/ExPWMNm这一个包含“英雄区域”不同于此页面上的代码片段。我需要导航坚持到顶部的视口，一旦用户滚动过去的英雄区域。尽管尝试了几次，我仍然没有成功地使#navbar位置变得粘滞/固定。我已经读过了立场:sticky可能还没

浏览 2提问于2020-06-30得票数 1

回答已采纳

1回答

导航栏与标题重叠，框阴影不显示，无法更改h1字体大小

html、css、box-shadow

我是编程新手，最近刚开始学习html和css。我已经做了基本的网站布局使用css网格(圣杯布局)，但有几件事我不能解决。1)由于导航栏与页眉重叠，因此在导航栏下未显示阴影，且无法使用粘滞的导航栏/页眉。

浏览 24提问于2019-12-05得票数 0

回答已采纳

1回答

CSS布局Noob

css、layout、flexbox、css-grid、bootstrap-5

我试图为一个网站创建以下布局，但没有能够创建准确的我想要的东西。我知道这应该非常简单，但我是一个开发人员，而不是UI / UX向导。因此，我希望左边有一个边栏和菜单项，一个顶部导航(固定在页面顶部)和一个页脚固定在页面底部，站点主体在顶部导航和页脚之间的区域内滚动。还有一些页面，我希望主体中的内容垂直和水平对齐(表单输入)。理想情况下，im希望使用引导5.2，但并不反对使用css<e

浏览 4提问于2022-10-21得票数 -1

回答已采纳

4回答

无法让CSS粘性页脚工作。我做错了什么？

css、footer、sticky

这是我在这里的第一篇文章，我真的很喜欢这个网站。谢谢，大伙们。

浏览 1提问于2008-10-01得票数 4

回答已采纳

3回答

引导导航下面/后面的内容

jquery、html、css、twitter-bootstrap、twitter-bootstrap-3

为什么相同的代码在引导示例中有一个很好的顶部边距，但是如果我把它放在jsfiddle中，内容就在导航下面。我在用图书馆<link rel="stylesheet" hr

浏览 6提问于2014-10-31得票数 1

回答已采纳

1回答

我是CSS grid的新手。我制作了一个简单的联系人表单来试验这个系统。我的网格有2列和5行。我在左列放置了4个input，在右列放置了1个textarea，在最后一行放置了最后一个input。可以垂直调整textarea的大小。问题是向下拖动textarea会调整网格中所有行的大小，包括相邻列中的行，从而更改整体布局(请参阅下面的代码片段示例)。对我来说，这似乎是一种正常且合乎逻辑的行为，但我想知道是否有任何方法

浏览 20提问于2020-08-18得票数 0

1回答

HTML CSS网格-需要布局好的实践和建议

html、css、frontend

我从前端开始，目前正在学习html / css / vanilla javascript。目前，它进行得很好，但我关心的是了解总体的设计布局组织，然后响应性设计成为我的另一个问题，因为我不能正确地定义默认布局。最佳实践是什么?使用CSS网格，我应该只创建诸如页眉、导航、主、页脚之类的基本区域吗？或还应该在div/节内创建嵌套网格吗?网格声明一个主要内容区域</

浏览 1提问于2020-06-24得票数 0

2回答

修复响应页面中的元素位置

html、css

我有一个有很多标签的html页面。我尝试用css设置样式的是article和nav。，但我不知道css很好。首先，我必须只在页面的60%显示文本，所以我这样做了，并且它起作用了：然后我必须在我的主要文章的左侧显示我的导航，但它也必须是我页面内容的20%的宽度(以及我的文章的其余宽度我的导航位置在改变。我需要它

浏览 0提问于2015-04-17得票数 1

1回答

保存记录前弹出消息

oracle-apex、oracle-apex-5.1

我有一个自定义弹出窗口的要求，它需要在保存在交互式网格中的记录之前弹出。有没有办法实现这一点？

浏览 13提问于2020-05-21得票数 0

回答已采纳

4回答

滚动视图中可见区域中的中心元素水平。

javascript、html、css

我想要在可滚动网格的可见区域水平地对一个元素。因此，最后一行中的文本应该在蓝线内水平居中。，这就是我想要的：当滚动时，它应该保持居中和可见：，这就是我到目前为止得到的：<div class="wrapper">console.log(el.clientWidth); el.style.maxWidth = el.c

浏览 10提问于2022-05-06得票数 0

回答已采纳

2回答

对既有场地进行响应设计改造

css、responsive-design

我只需要一些关于处理这个问题的最佳方法的建议，并且在论坛上阅读了这么多的建议，并且修改了我在Codepen和jsFiddle上看到的这么多不同的代码，我在帖子中看到，我现在可能比开始的时候更困惑了！页眉和页脚将在不同分辨率下略有变化，导航栏将切换到某个断点上的下拉/离开画布菜单，但这些都不是一个可以处理的问题。它的中间部分(边栏，内容，边栏)将在移动和桌面之间变化最大，这是我需要的建议。

浏览 5提问于2013-06-15得票数 3

1回答

jQuery库干扰Javascript为navbar和可过滤的投资组合小问题-引导3

javascript、jquery、html、css、twitter-bootstrap

小提琴手：导航栏的代码是：/*

浏览 1提问于2014-02-25得票数 1

回答已采纳

2回答

无法理解MDL布局与MDL网格组件之间的关系

material-design-lite

来自使用MDL布局原则可以通过提供可重用的组件简化可伸缩页面的创建，并通过建立可识别的可视元素、坚持逻辑结构网格以及在多个平台和屏幕大小之间保持适当的间距来鼓励跨环境的一致性。“ 因此，从上面对布局的定义来看，似乎包括了网

浏览 0提问于2015-11-08得票数 0

回答已采纳

1回答

可滚动的背景图像，仅覆盖页面的某些部分

html、css、grid、background-image

我需要你的帮助来解决这个问题。我正在开发一个个人项目，我创建了一个链接到外部index.css的经典index.html文件。我使用css网格创建了不同的内部部分，每个页面都有不同的内部网格结构。下面是我的索引页结构： -top左:带有徽标的div。徽标本身是重定向到主页/登录页面的锚点链接； -top右侧，徽标旁边:带有导航栏的div，带有3/4链接(关于、联系人等) -m

浏览 18提问于2021-03-20得票数 0

2回答

Bootstrap 3-如何在滚动中使导航栏粘滞

css、html、twitter-bootstrap、twitter-bootstrap-3

我想做的是让导航栏停留在页面的顶部，当你滚动它的时候。由于我是JavaScript的新手，我看了一些教程，但是，它们都没有真正使用Bootstrap导航栏。下面是导航栏的HTML代码，如果有用的话： <nav class="navbar navbar-default" id="mNavbar">

浏览 0提问于2017-01-20得票数 5

回答已采纳

4回答

用CSS网格创建导航条

html、css、css-grid

我正在创建一个用CSS网格制作的导航条。然后，我创建了三个区域的网格:徽标，菜单，切换。到目前为止，直到我尝试删除一个/部分部分之前，的空白仍然存在，即使这个部分已经消失了。然后，我试图消除空白，并以一个空白的每一节。但是边距不会在网格的</e

浏览 6提问于2021-04-19得票数 8

回答已采纳

4回答

滚动后粘滞导航栏未修复

html、css

我遵循了一个关于粘滞导航栏的教程，使用纯css而不使用javascript。问题是当我向下滚动时，粘性导航栏没有固定在页面顶部。在这个粘性的导航栏下面，我还有另外3个部分。每次我向下滚动页面时，导航栏都会移到部分下，并且不再起作用。在页眉中，我有一个全宽的图像，我有一些文本和一个按钮。以下是我的HTML导航栏代码：header { margin: aut

浏览 0提问于2019-04-22得票数 2

3回答

为什么我的菜单没有显示一个内部列表品牌？

html、css

HTML --这是我的HTML源代码，我想在这里制作一个带有柔性盒和网格的菜单列表。<html> <title>dmghdfjb</title></head&g

浏览 3提问于2020-05-28得票数 0

回答已采纳

3回答

Flexbox覆盖的区域，这些区域很难或不可能用网格实现

css、flexbox、css-grid

它被广泛强调，Flexbox是用于1-D和Grid用于2-D，但我还没有找到一个明确的解释，为什么网格不能用于1-D和取代Flexbox。是但是你也可以说，像这样的纯粹的一维布局在Flexbox中更强大，因为Flexbox允许我们更容易地移动这些元素(例如，将它们全部移动到一个或另一个侧面，改变它们的顺序，平均地将它们隔开等等)。我使用Grid和Flexbox进行基本布局:页面上的框的一般布局和一些动态的，通常是堆叠的。美感<em

浏览 1提问于2019-03-08得票数 7

回答已采纳

2回答

我的菜单使用了nav标签，并不能完全覆盖整个页面，只覆盖了半个屏幕

html、css

在移动屏幕尺寸下，我的菜单栏不会延伸到整个页面，而且只覆盖了其中的一半，尽管我使用了css网格并正确设置了它的格式。一旦你点击菜单按钮，它也不能正确显示导航区域，因为一些选项不在屏幕上。我尝试在css中添加overflow: hidden到我的导航中，但是这根本没有解决问题，它仍然只位于页面的一侧。CSS： .grid {grid-template-

浏览 55提问于2019-01-07得票数 0

点击加载更多