我想在页面底部打页脚分,但内容重叠了.这样地:

enter image description here

正文,html,#根

html, body, #root {
height: 100%;
}

#root , body {
 display: flex;
 flex-direction: column;
}

页脚

position:absolute,
bottom:0,
width:100%

推荐答案

那是因为你在footer上设置了position:absolute.有更简单的方法来固定底部的页脚.假设您的项目 struct 是这样的,请注意.app中有三个直接子级:

<html>
 <body>
  <div id= "root">
    <div class= "app">
      <Header></Header>
      <Content></Content>
      <Footer></Footer>
    </div>
  </div>
 </body>
</html>

您只需要:

.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* gap: 3rem; */
}

Javascript相关问答推荐

html + java script!需要帮助来了解为什么我得到(无效的用户名或密码)

400 bad request error posting through node-fetch

将数组扩展到对象中

每次重新呈现时调用useState initialValue函数

无法设置RazorPay订阅API项目价格

在Java脚本中录制视频后看不到曲目

rxjs在每次迭代后更新数组的可观察值

从异步操作返回对象

使用静态函数保存 node 前的钩子

如何在不将整个文件加载到内存的情况下,在Node.js中实现Unix粘贴命令?

在D3.js中创建具有旋转手柄的可拖动、可调整大小的框?

在openstreemap/leaflet中,当鼠标在 map 上移动时,如何在小工具提示中实时显示坐标

JQuery-无法 Select 使用elementor添加的元素的值

Reaction-跨多个组件共享一个功能

如何有条件地返回Java脚本中的函数?

JS日期构造函数与future 日期不一致

如何在应用内Chromium浏览器中启用通知模块?(未捕获ReferenceError:未定义通知)

更改垫子树界面线条边框底部问题的方向设计Angular

如何在Xbox中撤销令牌

Reaction加载器不能处理派生路径