如何在Next.js (React)中创建粘性页脚
在Next.js (React)中创建粘性页脚，可以按照以下步骤进行：
步骤1：安装必要的依赖 首先，确保你的项目已经安装了Next.js。如果没有安装，可以使用以下命令进行安装：
npx create-next-app my-app然后进入项目目录，并安装 styled-components 和 react-sticky-footer：
cd my-app
npm install styled-components react-sticky-footer步骤2：创建页面组件和样式 在你的pages目录下，创建一个名为"index.js"的文件，并在其中编写以下代码：
import styled from 'styled-components';
import StickyFooter from 'react-sticky-footer';
const Container = styled.div`
min-height: 100vh;
display: flex;
flex-direction: column;
`;
const Content = styled.div`
flex: 1;
`;
const Footer = styled(StickyFooter)`
background-color: #f1f1f1;
padding: 20px;
text-align: center;
`;
const Home = () => {
return (
<Container>
<Content>
{/* Add your page content here */}
<h1>Hello, World!</h1>
</Content>
<Footer
bottomThreshold={50}
normalStyles={{
backgroundColor: "#f1f1f1",
padding: "20px",
textAlign: "center",
}}
stickyStyles={{
backgroundColor: "rgba(255,255,255,.8)",
padding: "20px",
textAlign: "center",
}}
>
{/* Add your footer content here */}
<p>This is a sticky footer.</p>
</Footer>
</Container>
);
};
export default Home;步骤3：运行项目 运行以下命令启动你的Next.js项目：
npm run dev然后在浏览器中访问 http://localhost:3000/，你应该能够看到页面内容和粘性页脚。
解释和推荐的腾讯云相关产品和产品介绍链接地址：
- Next.js：Next.js是一个React框架，用于构建基于React的服务器渲染应用程序。它提供了丰富的功能和性能优化，并且易于使用和部署。
- styled-components：styled-components是一个流行的CSS-in-JS库，它允许你使用JavaScript编写组件样式，并自动处理CSS的生成和管理。
- react-sticky-footer：react-sticky-footer是一个用于创建粘性页脚的React组件库。它提供了方便的API来实现固定在页面底部的页脚。
请注意，以上推荐的产品和链接都是示例，供参考使用，并非腾讯云相关产品。
相关·内容
1回答
我想做一个粘性的页脚，如果没有足够的内容填满整个页面，它会粘在底部。我已经在CSS中找到了这样做的方法，但是很多都不能翻译成React/Next，因为它涉及到处理html和body标签。我想知道有没有其他的方法。 下面是我的页脚的JSX： <div>
<footer>
<a href={"https://www.instagram.com/linghandmade18/"}>
<i className="fab fa-instagram" />
浏览 8提问于2020-11-10得票数 0
1回答
我只需要一种方法，使页脚粘性，并留在底部的页面，同时使用反应。 页脚不会停留在页面底部，尽管遵循materialize文档并在我的应用程序中创建了页眉、主页脚格式。 页脚显示正确，但拒绝转到底部(成为粘性页脚)。 下面是app.js的render方法： render() {
return (
<React.Fragment>
<Header />
<main>
... my stuff here ...
浏览 14提问于2019-06-28得票数 0
1回答
我正在尝试构建与此页面中的条件粘性页脚相同的功能：
当您向下滚动页面时，页脚一直保持在位置，直到页面上的某个点，此时它只是页面流的一部分，然后滚动到屏幕上。我需要复制这个功能，但我不知道他们是如何在页面上这样做的。
如果有什么不同的话，我将在react应用程序中构建这个功能。页脚被编码，并作为一个粘性页脚正确地发挥作用，但在某一点上没有成为页面流的一部分--目前它只是一直保持粘性。
浏览 7提问于2022-09-08得票数 0
回答已采纳
1回答
我有一个页脚，当内容在一行内时，它在底部是粘性的，如下所示： ? 当我有多行内容时，页脚也在底部，但它将覆盖最后一行内容的一部分，如下所示： ? 我使用语义ui react中的Card.Group来处理内容，我的页脚CSS是： position:'absolute',
left:0,
bottom:0,
right:0 我该如何解决这个问题呢？
浏览 30提问于2020-04-23得票数 1
我正在尝试创建一个报告，其中有一个要求，页脚必须放置在最后一页的底部。报告体根据从数据库返回的记录数动态加载。报告可以是1页或更多。
我已经尝试使用粘性页脚，这对于查看网站上的HTML是可以的，但是当报告的长度大于1页时，当查看打印预览屏幕时，页脚与报告的正文重叠，并且页脚保留在第一页而不是移动到最后一页。
有没有人知道在创建可打印屏幕时，在最后一页的底部放置页脚的方法，该屏幕的格式正确，用户无需使用粘性页脚即可打印。
当有多个页面要打印时，我实现的粘性页脚不能在打印预览屏幕中正确显示。
浏览 0提问于2013-02-06得票数 6
1回答
我试图在swiftUI中创建粘性页脚，其中屏幕的其他部分是可滚动的，但是在页脚中，有一个带有按钮和其他元素的视图需要修复。
谢谢你的帮助。
浏览 2提问于2021-08-12得票数 0
1回答
带引导带5的水平导航布局
、、、、
我很难让引导程序水平显示我的导航选项(例如，类似于引导文档中显示的示例)。
下面是我的页面的代码代码：
澄清一下:在我的代码示例中，Home Features Pricing应该是水平的，而不是垂直的。
我认为的问题可能与我在<body>中使用flex-column有关。但是，如果不破坏我设计中的其他项目，我就无法删除它(例如，粘性页脚-使用柔性页脚来处理粘性页脚，比设置固定高度等烦人的选项要干净得多。)
所以我真的被困住了！
浏览 1提问于2021-01-17得票数 1
回答已采纳
所以我有一个使用Next.js的SSR应用程序。我使用的是一个使用WEB API的第三方组件，所以它需要加载到客户端而不是服务器上。我正在使用'two-pass‘渲染，我在这里读到了：
我试图弄清楚为什么当next.js页面状态中的'ssrDone‘状态改变时，整个<Layout>组件不必要地重新呈现，包括页面的页眉、页脚等。
我读过关于React.memo()以及利用shouldComponentUpdate()的文章，但我似乎无法阻止它重新呈现<Layout>组件。
我的<Layout> console.log消息触发两次，但<Th
浏览 154提问于2019-11-22得票数 4
回答已采纳
我正在尝试创建一个类似于以下结构的RecyclerView：
它应该是一个分段的 RecyclerView，具有粘性页眉和粘性页脚。
对于其他words...each部分(或条目)，应该有一个具有可滚动内容的粘性页眉和一个粘性页脚。
有谁知道如何做到这一点吗？
提前感谢！
浏览 9提问于2017-04-24得票数 1
12回答
无论有没有顶部导航，这是非常常见的网站有一个粘性页脚。引导程序可以轻松地创建固定的页脚，但是没有这样的工具来创建粘性的页脚--这有很大的不同。
在谷歌上搜索这个问题会发现，成百上千的开发人员都有同样的问题，但没有一个好的答案。
具有讽刺意味的是，页面本身除了引导样式之外还有一个粘性页脚和一个固定的顶部导航条。不过，这都是定制的css，而不是框架的一部分。因此，一个明显的途径是采取和重构他们的定制样式，因为它显然在Bootstrap框架内发挥良好，但这似乎比它应该更痛苦。
参见获得一个带有引导带顶部导航条的示例页面，以及一个不受欢迎的、非粘性页脚。
问题：
(感谢软层-感谢)
所需解决
浏览 0提问于2013-11-03得票数 76
回答已采纳
7回答
是的，所以我决定创建一个jQuery函数来改变我的#mainContent div的大小，这样页脚就可以很好地适应，而不是使用粘性页脚。
基本上我想要做的就是
#mainContent { height: 100% - 40px; }
哪里
#footer { height:40px; }
我想出了
$(window).resize(function() {
var mainContent = $('#mainContent').innerHeight() - 40;
$('#mainContent').css("height"
浏览 0提问于2013-05-15得票数 3
回答已采纳
Next.js样式-页脚组件由于某种原因不在屏幕的底部？
import Head from "next/head";
import Navbar from "./Navbar";
import Footer from "./Footer";
const layoutStyle = {
display: "flex",
flexDirection: "column",
height: "100%",
width: "100%"
};
const Layout =
浏览 12提问于2020-05-14得票数 1
回答已采纳
1回答
我基本上是想用react虚拟化表：来完成这个任务。
制作粘性页脚，如页眉，具有可滚动的表体。
我在AutoSizer中为header+body和页脚创建了两个表。但是，当第一个表有滚动：时，我的页脚宽度不正确。我怎么才能修好它？或者用另一种方式实现粘性页脚。
<AutoSizer>
{({ height, width }) => {
const tableColumns = this.getColumns(columns, width);
return (
<div>
<Table
浏览 3提问于2017-04-12得票数 1
11回答
如何使粘脚在反应？
、、、
我制作了一个粘性页脚高级组件，它封装了其他组件的内部：
Footer.js
//this is a higher-order component that wraps other components placing them in footer
var style = {
backgroundColor: "#F8F8F8",
borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
position: &
浏览 22提问于2016-11-09得票数 34
回答已采纳
2回答
如何使用页脚创建粘性页脚示例当我创建一个footer.php文件并将其包含到主页时，如何使其成为粘性页脚我的搜索，创建粘性页脚的最好方法是使用file.For标签，如以下代码所示。
<div class="wrapper">
<header>header</header>
<div class="main">
vfdgdgdgdf
</div>
<div class="push"></div>
</div&
浏览 2提问于2015-07-14得票数 1
“我怎样才能把页脚钉在页底？”
我已经在一个棘手的情况下与脚很多次，我总是以一个不同的结果。
使用CSS创建粘性页脚的最简单方法是什么？我想要这个：
像这样：
浏览 3提问于2022-07-14得票数 0
1回答
如何在Liferay中创建粘性页脚？我读过很多博士书，但都没有用。
我在custom.css里有这个
#footer {
background-color: black;
color: white;
font-size: 200%;
text-align: center;
line-height: 3em;
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
在portal_no
浏览 2提问于2016-09-22得票数 0
回答已采纳
我如何用Jquery制作一个粘性页脚，直到内容结束前达到350px，才能粘在浏览器底部。基本上，我在内容的底部有另一个大页脚，我希望粘性页脚保持粘性，直到你滚动到350px的页脚，它将留在最后一个页脚的顶部，这样你就可以阅读内容了
基本上就像做一个粘性页脚，然后在内容底部之前的350px，停止粘性页脚，使其与页面一起滚动。
我在网上找到了这段代码，但我知道代码可以找出内容的结尾，而不是可视浏览器的结尾。它可以作为一般的粘性页脚( different...Although )工作。
$(function(){
positionFooter();
function positionFooter(
浏览 0提问于2012-11-28得票数 1
回答已采纳
1回答
在Next.js中为幻灯片菜单创建类切换功能的正确方法是什么？ 我已经创建了一个菜单，它具有可切换的滑入功能。有一个按钮可以切换一个“切换”的类，然后菜单从侧面滑入。我不确定在使用React/Next.js时，这种方法本身是否是错误的，在这种情况下，我会喜欢其他方法。 因此，通常我会在页脚的某处内联切换脚本，以获得最佳速度。这是一个非常小的脚本，所以不需要包含在单独的文件中。我只是不知道在使用Next.js时应该把这个脚本放在哪里。 我读到过你可以使用next/head，将代码放在一个单独的文件中，然后通常在那里包含该文件，但对我来说，这听起来并不是很理想。这会创建一个单独的请求，并使整个过
浏览 33提问于2021-04-27得票数 1
回答已采纳
我目前正在摆弄“粘性”页脚，并且遇到了Q：中引用的常见链接。
虽然我很高兴这些修复存在，但我很好奇为什么在HTML5的重新设计精神中没有解决页脚问题。抛开语义问题不谈，web文档作者希望页脚具有默认行为，即“粘性页脚”：留在页面底部，除非页面内容更长。
我觉得这是一个错过的机会，以消除许多黑客，并想知道是什么考虑因素，不分配一个‘粘性’行为的页脚标签。
浏览 0提问于2011-05-05得票数 5
回答已采纳
我是从开始的，它提供了一个粘性页脚和一个居中的3列人工布局。两边的列是固定的宽度，主要内容应该是收缩包装以适应其内容的大小，但实际上是拉伸到max-width中为包装器定义的CSS值。主要内容是延伸的，因为CSS不包含任何会导致收缩包装的样式(即"display:inline“、"display:inline-block”、"float:left“、"display:table”、"display:inline-table“等)。最后，包装器包含除了粘性页脚之外的所有内容。
我尝试使用display:table设置包装器来收缩包装主要内容，但现在包装器d
浏览 3提问于2012-03-27得票数 1
回答已采纳
2回答
有没有人能推荐在HTML5 Android Phonegap应用程序中创建固定(粘性页脚)页脚导航栏的最佳方法？
干杯保罗
浏览 0提问于2011-11-24得票数 6
回答已采纳
1回答
在我的web应用程序中，我有一个用于小屏幕的粘性页脚。问题是粘性页脚根据键盘的状态上下跳。
我正在寻找它被覆盖在移动键盘。下面是用于粘性页脚的css
width: 100%;
position: fixed;
bottom: 0;
height: 85px;
left: 0;
right: 0;
有什么解决办法吗？
浏览 4提问于2015-05-18得票数 3
回答已采纳
1回答
webkit粘性页脚菜单
、、、、
我想为web应用程序创建一个粘性页脚菜单(-webkit/-moz)。查看屏幕截图。iphone的蓝色区域边框，红色区域代表内容，底部的灰色区域是页脚。
屏幕1：
开始屏幕。完整的内容与粘性页脚在窗口底部，我可以通过位置:固定。
屏幕2:实际所需的行为如果页面内容向下滚动，页脚应该停留在窗口的底部。这就是我需要的。
屏幕3:当前行为与位置:已修复这是当前行为，如果我滚动页面，整个内容将向上移动，包括底部的粘性页脚。
我想要一个网络应用程序，行为类似于ipod库。修复了底部的菜单和上方的可滚动内容。有什么解决方案吗？
浏览 1提问于2011-02-02得票数 0
回答已采纳
2回答
我正在寻找一种解决方案，有一个粘性页脚，其高度可能取决于浏览器的宽度。
流体设计中的粘性页脚并不都是微不足道的。我已经找到了实现粘性脚注的提示、讨论和解决方案。然而，所有这些都依赖于固定的和已知的页脚高度。在我的例子中，页脚的高度包含文本，行数取决于屏幕的宽度。
而不是做各种媒体查询和构建一些工作，我更喜欢一个干净的CSS解决方案，其中粘性页脚自动适应屏幕的宽度变化。
你们中有谁有最终答案吗？
浏览 0提问于2013-06-04得票数 5
无论页脚有多少内容，粘性页脚都会粘附在网页的底部。如果您在网页的CSS样式表中使用FlexBox命令，这将是一个解决问题。所有现代浏览器都支持FlexBox。
然而，使用Angular2构建一个web应用程序，我无法应用最简单的FlexBox命令！页脚不粘在底部！这是我的。
在柱塞应用程序中，style.css包含一个非常简单的Flexbox命令，它可以工作--只需将index.html的内容替换为index1.html，并查看粘性页脚在没有角度存在的情况下是如何工作的。对于Angular2应用程序，我使用的是相同的style.css，因此我在应用程序中添加了下面的模板，明确地标记了CSS类m
浏览 2提问于2017-01-25得票数 3
回答已采纳
我正在开发一个现有的Next.js web应用程序，我想添加DocuSign Node.JS SDK来使用JWT并为我的前端应用程序生成一个令牌。Next.JS应用程序托管在Vercel上，Vercel可以运行无服务器功能。
我在构建Node.JS端点以获得调用esignatures的JWT令牌时遇到了问题。有人知道如何将JWT工作流集成到Next.JS/React.JS应用程序中吗？
浏览 10提问于2021-12-07得票数 0
回答已采纳
我是Next.js的新手，来自一个快速/创建-反应-应用背景，我不知道Next.js是如何工作的。
使用高速公路上的SSR，我们将单击一个链接，服务器将发送相应的ejs/pug/html页面，以匹配新的路由。如预期的那样，客户端上的状态丢失了。
但是对于Next.js，客户端的状态保持不变，这不是我所期望的SSR的行为方式。也许带有Next的SSR更类似于为数据获取api，就像我在下面想象的那样？
用户访问需要SSR的新页面。
NextJs调用getServerSideProps来获取一些数据(从api/db)，并为页面组件填充props。
客户端的页面组件检测新的props并更新
浏览 1提问于2021-10-29得票数 2
是否可以在IE兼容模式下为添加粘性页脚，并且可以跨浏览器兼容？
我试着添加，但是当我添加它的时候似乎所有的东西都坏了。
不能使用粘性页脚，它在父容器上使用100%的高度，然后使用负的上边距作为页脚，并将其拉回到视口中，因为这将消除查看页脚和主要内容之间的背景色的能力。因为模板使用圆角，所以不能在其中注入背景颜色的间距div，这似乎会使它变得困难。
我也尝试了类似Ryan Fait方法的'‘，但我也不能让它工作。
浏览 0提问于2012-08-31得票数 0
回答已采纳
1回答
我有一个页面，它有一个粘性页脚，使用这个方法：
页面是通过Javascript动态创建的，除了IE6 (不幸的是，我必须支持这个愚蠢的浏览器)，所有的浏览器都可以完美地使用我的粘性页脚。页脚移动到窗口底部并停留在那里(页面延伸到超出窗口大小的位置)，因此当您滚动时，页脚保持在中心位置。
下面是我的粘性页脚的相关html代码：
<div class="container">
<div class="header">...</div>
<div class="navigation">...<
浏览 2提问于2012-10-01得票数 0
2回答
我发现了两个不同的CSS粘性页脚实现：
Steve Fait粘性页脚- Hatcher粘性页脚-
有人能解释一下他们每一个人是如何工作的吗？
如果还有其他已知的实现，请您发表评论或编辑这个问题。
浏览 1提问于2011-04-21得票数 5
回答已采纳
3回答
我已经为Wordpress网站创建了一个粘性页脚。我给了这个部分ID #formfooter，并使用了以下CSS：
#formfooter{
position:fixed;
bottom: 0px;
width: 100%;
z-index: 999;
}
现在，我想相应地扩展高度。当用户向下滚动到底部时，粘性页脚会覆盖底部的内容。我怎么才能让它向下滚动一点呢？
浏览 0提问于2018-12-10得票数 1
回答已采纳
我正在尝试使用React Native中的KeyboardAvoidingView组件创建一个粘性页脚。我非常接近完成这项任务，然而，当他们的键盘出现时，页脚正在向上移动，但同时高度也在缩小。
下面是键盘出现之前的样子：
下面是键盘弹出后的样子：
正如您所看到的，提交容器比没有键盘之前要小。
下面是我当前的代码：
render() {
return (
<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
<View style={{ fl
浏览 1提问于2017-07-09得票数 10
2回答
我试图在样板中实现一个粘性页脚，但我找不到一种方法来工作。我尝试了和发布的解决方案，但这两个解决方案对我都不起作用。
我研究了一下，发现Boilerplate不支持粘性页脚。你们中的任何人在这个问题上有什么幸运的吗？
要查看我确实需要粘性页脚的页面，请转到
谢谢你的帮助。干杯
浏览 1提问于2012-01-29得票数 3
回答已采纳
1回答
对于我经常遇到的问题，我需要一个非常干净和简单的解决方案，这样我也可以在其他项目中继续使用。我需要一个粘性脚注，与react-router-dom一起工作。我好像不能让它工作。我的App.js看起来像这样： <div>
<Header loaded={loaded} />
<Switch>
<Route
path="/about"
render={props => <About loaded={loaded} {...props} />}
/
浏览 10提问于2019-03-16得票数 0
回答已采纳
我无法在滚动时查看我的内容，因为粘性页脚隐藏了内容。我想设置页脚总是与页边距顶部或填充顶部，以能够看到的内容。如何设置页边距顶部或填充顶部粘性页脚？如果我添加stickyfooter，我需要在content和stickyfooter之间留出一些空格。 http://jsfiddle.net/a6c8rf4y/1/ #footer
{
bottom:0px;
width:100%;
height:50px;
position:fixed;
height: 50px;
line-height: 50px;
background-color: #C97;
}
浏览 17提问于2019-02-08得票数 0
1回答
需要使用UIScrollView实现粘性页脚行为，我实际上希望复制UITableView的节页脚视图(红色视图)的行为。(请参阅以下gif url)
我尝试使用以下约束，我们需要Bottom Container是粘性的。(它的行为必须像https://imgur.com/a/45Urz gif中的红色页脚)
浏览 0提问于2018-02-10得票数 1
回答已采纳
1回答
带固定肚脐的粘脚
、、
对于一个固定页眉的粘性页脚，我有一个问题。我遵循的一些解决方案似乎符合我想要实现的目标，比如()、()和()，但我仍然想解决一些问题。
这是我的
页脚在页面底部与微小的内容或它的很多-检查！
由于#siteContent:a(创建一个与标头高度相同的间隔)-检查！
滚动条仍然存在与微小的内容-取消检查！
页脚在页面底部时，当在div (siteContents)中，我有这样的东西-取消检查！
(...)
<div id="siteContents" class="clearfix">
<div itemscope="items
浏览 1提问于2014-06-24得票数 0
我下载了和代码。
粘性页脚的工作方式与预期一致-如果内容窗格为空，则页脚将停留在视口的底部，并在已满时将页脚向下推。
我在960网格系统中使用css粘性页脚代码，但当侧栏中的内容展开并到达页脚时，页脚与边栏内容的末尾重叠：
你知道我哪里出问题了吗?我该如何解决这个问题？
浏览 3提问于2012-05-24得票数 0
回答已采纳
2回答
粘性页脚覆盖正文内容的底部
、、、、
我添加了一个粘性页脚，在Safari中不能覆盖正文内容时遇到了麻烦。Chrome和FF运行得很好，我在正文中添加了一个底边距来抵消粘性页脚的高度。为什么同样的功能在Safari中不起作用？ 这是有问题的页面...我不知道在这里粘贴代码的哪一部分，抱歉... http://go.datis.com/2019summit_agenda 我希望正文内容在它和粘性页脚之间留出空白处。
浏览 33提问于2019-01-30得票数 1
回答已采纳
1回答
我正在一个wordpress网站上工作。但我已经用html编写了主页。我要主页响应。主题提供响应或粘性页眉，但页脚不是粘性的。请帮助我使页脚响应以及粘性的底部。
浏览 2提问于2014-12-02得票数 0
回答已采纳
我正在为我的公司客户做SharePoint UI品牌推广。大多数客户希望他们的页脚总是在页面的底部(不是粘性的)。当内容较多时，它会自动向下移动，但如果内容较少，我希望将页脚留在屏幕底部。在普通的HTML页面中，我可以使用CSS来实现这一点。但是在SharePoint中，我使用javascript来解决这个问题。
有没有办法在SharePoint 2013中只使用CSS就能解决这个问题？
浏览 0提问于2014-05-06得票数 2
2回答
我可以按照说明在网页上设置粘性页脚
这表明没有设置min-height:100%和height
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
但是，在其中一个页面中，我需要设置height:100% in.page-wrap来调整其子页面的高度。在我设置了高度:100%后，我的粘性页脚不工作，并出现在页面的中间。
有没有办法让粘性页脚在.page-wrap中高度设置为100%时工作？
浏览 7提问于2013-09-09得票数 2
我正在尝试在<LeftNav>组件中创建一个粘性页脚，到目前为止还没有成功。这就是它需要的样子：
我尝试过在搜索字段的包装器上使用position: fixed; bottom: 0和position: absolute; bottom: 0，但是当用户滚动列表项时，搜索字段向上移动。如下所示：
你知道怎么解决这个问题吗？
浏览 2提问于2016-02-27得票数 5
在原生react中，如何根据特定ScrollView的高度应用不同的页脚样式？ 基本上，我想为一个不是整个手机高度的视图创建一个粘性页脚，如果ScrollView更大，我想在ScrollView的末尾添加这个页脚。 希望这至少有点道理！ 下面是用于演示的示例。 ThanksSimon //If the view is larger than the phone height, have the footer at the bottom of the scroll view
<View style={{flex: 1}}>
<Header navigation={this
浏览 20提问于2020-08-27得票数 0
3回答
将数据从子组件传递到父组件
、、、、
我正在用类组件构建一个React应用程序，我真的困在一个问题上了。我制作了一个应用程序，最初呈现一个搜索表单，根据用户在表单中输入的内容获取一些数据，并将它们显示在一个表中。一切都很好，我很高兴。当我介绍一个页脚时，问题就出现了；出于风格的考虑，我想让页脚始终停留在页面的底部。在开始时，只有搜索表单，没有表；如果我将页脚的CSS样式设置为“位置:粘性”，就没有办法让它停留在底部。它需要在固定的位置。但是，当表呈现时，固定位置不能工作，因为表可能很长，并且在页脚上呈现。所以我需要动态地更改页脚的CSS :我想出的解决方案是在CSS文件中为相同的页脚创建两个样式，一个是位置固定的，另一个是相同的，
浏览 3提问于2022-04-09得票数 0
我有一个包含核心组件SectionList的React Native页面。SectionList具有粘性部分页眉(stickySectionHeadersEnabled)和列表页脚(ListFooterComponent)。当用户滚动经过最后一节时，最后一节页眉仍然停留在页面顶部，覆盖页脚。然而，我更希望粘性标题包含在小节列表区域的主体中，而不是停留在屏幕上超过最后一节的结尾。 有没有可能用SectionList来实现这一点，或者我应该采取另一种方法？ 展示这一行为的世博会小吃(仅限iOS和安卓) https://snack.expo.io/@unstableair/rn-sectionli
浏览 30提问于2020-04-16得票数 1
1回答
我试图在网页中创建一个具有固定高度部分的粘性页脚。当我尝试这个，我得到了我的粘性页脚，但部分没有显示他们的固定高度。我该怎么解决这个问题？
Ps:当我将最小高度改为高度时，它解决了部分高度的问题，但我没有粘性页脚。
html,body {
width:100%;
height:100%;
position:relative;
}
.wrapper {
position:relative;
width:100%;
min-height:100%;
margin-bottom:200px;
}
.section1{
width:100%;
height:100%;
background-c
浏览 3提问于2017-03-06得票数 0
回答已采纳
1回答
波旁酒的粘性页脚
、、
有没有人知道如何创建一个页脚，它粘在页面底部，同时保持它的响应使用波旁整洁？
所有更著名的粘性页脚解决方案都不是“兼容”整洁。
浏览 1提问于2015-01-28得票数 0
回答已采纳
在，你可以看到我有一个灰色的页脚，而在IE，Safari和火狐浏览器中，页脚贴在底部。但在Chrome中，它不会粘在底部--这很奇怪。
我使用在堆栈上找到的以下方法创建了这个粘性页脚......。
我想知道以前有没有人看过这个，或者有什么建议来解决这个Chrome问题。
浏览 9提问于2011-04-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
