css 为什么我的页脚卡在网页中间？

yvfmudvl 于 2024-01-09 发布在其他

关注(0)|答案(3)|浏览(93)

我尝试了所有的方法，但我的页脚卡在中间，我甚至将身体高度设置为100%/100 vh。页脚在中间（https://i.stack.imgur.com/qzp2i.png）css：

body {
display: flex;
flex-direction: column;
font-family: "Poppins", sans-serif;
font-family: "Righteous", sans-serif;
font-family: "Roboto", sans-serif;
}
.navbar-nav li a:hover {
color: #536976 !important;
}
.d-flex {
width: 100%;
}
.footer {
width: 100%;
text-align: center;
height: 30px;
margin-top: auto;
position: absolute;
bottom: 0px;
}
.footer p {
margin-top: 25px;
font-size: 12px;
color: #fff;
}
.padding {
padding-top: 20px;
}

.form-hide {
margin: 0px;
padding: 0px;
}
.delete-btn {
margin: 0px;
padding: 0px;
}
.panel-body {
padding: 15px;
text-overflow: ellipsis;
overflow: hidden;
}
.inline {
display: inline;
}

.compose {
margin-top: 50px;
height: calc(100vh - 80px);
}
.post {
margin-top: 50px;
}
.content {
display: -webkit-box;
\-webkit-line-clamp: 3;
\-webkit-box-orient: vertical;
overflow: hidden;
}
.journee {
background: #536976;
background: -webkit-linear-gradient(to right, #484e76, #536976);
background: linear-gradient(to left, #484e76, #536976);
\-webkit-background-clip: text;
\-webkit-text-fill-color: transparent;
}

字符串
网站首页
第一个月
我试图保持它固定与position: fixed。也页脚是卡住的职位下，我不知道发生了什么事，我正在使用引导5

css

来源：https://stackoverflow.com/questions/77741652/why-is-does-my-footer-stuck-in-the-middle-of-the-webpage

3条答案

按热度按时间

fquxozlt1#

答案是基于这个问题：questions/643879。
这允许保持<header>和<footer>动态。
这段代码将把页脚放在页面的底部，如果没有内容填充整个页面，页脚将位于屏幕的底部。

body { 
  min-height: 100vh;
  margin:0;
  background:#49515a;
  color: white;
  
  /* use flex */
  display:flex;
  flex-direction:column; 
}

header, footer {
  min-height:50px; 
  background:black; 
}

.content {
  /* between header and footer */
  flex:1; 
}

个字符

赞(0）回复(0）举报 2024-01-09

relj7zay2#

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Set minimum height to 100% of the viewport height */
  font-family: "Poppins", sans-serif;
  font-family: "Righteous", sans-serif;
  font-family: "Roboto", sans-serif;
}

.footer {
  width: 100%;
  text-align: center;
  height: 30px;
  margin-top: auto;
  bottom: 0;
}

.footer p {
  margin-top: 5px; /* Adjust as needed */
  font-size: 12px;
  color: #fff;
}

字符串
body至少占viewport高度的100%。在.footer上使用margin-top：auto，它将被推到flex容器的底部。

赞(0）回复(0）举报 2024-01-09

b4lqfgs43#

请确保您正确使用Flexbox。

body {
    display: flex;
    flex-direction: column;
    font-family: "Poppins", sans-serif;
    font-family: "Righteous", sans-serif;
    font-family: "Roboto", sans-serif;
    min-height: 100vh; /* Use min-height for full viewport height */
}

.content {
    flex: 1; /* Take up the remaining space */
}

字符串
额外的CSS：

.footer {
    width: 100%;
    height: 30px;
    margin-top: auto;
}

型

赞(0）回复(0）举报 2024-01-09

我来回答

css 为什么我的页脚卡在网页中间？

3条答案

相关问题

热门标签

最新问答