css 当内容较少时，内容结尾和视口显示底部的绝对页脚[重复]

9rbhqvlz 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(146)

此问题已在此处有答案：

How do you get the footer to stay at the bottom of a Web page?（32个回答）
2天前关闭。
我怎么能让页脚绝对即.在主要部分的内容和页脚底部的视口显示时，有较少的内容在主要部分的结束。我已经尝试了以下代码，请看一眼。如果你不明白我的问题，请在评论中提出，而不是给予否定。在下面的代码中，当节中的内容增加时，页脚将松开其固定位置并向上移动。所以告诉我能做些什么。

html{
    height:100%;
    box-sizing: border-box;
}
*,*:after,*:before{
    box-sizing: inherit;
}
body{
    position: relative;
    margin: 0;
    min-height: 100%;
    font-family: 'Roboto', sans-serif !important;
    background: #f2f2f2;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    min-width:250px;
    overflow-x:scroll
}
main{
    min-height: 100%;
    margin: 0;
}
footer{
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    
    background: #333;
    color: #fff;
    text-align: center;
    padding:  0 2rem;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
    <header>
        this is header
    </header>
    <main>
        1. Hello world
        <h1>1. Hello world</h1>
        <h1>2. Hello world</h1>
        <h1>3. Hello world</h1>
        <h1>4. Hello world</h1>
        <h1>5. Hello world</h1>
        <h1>6. Hello world</h1>
        <h1>7. Hello world</h1>
        <h1>8. Hello world</h1>
        <h1>9. Hello world</h1>
        <h1>10. Hello world</h1>
        <h1>11. Hello world</h1>
        <h1>12. Hello world</h1>
        <h1>13. Hello world</h1>
        <h1>14. Hello world</h1>
        <h1>15. Hello world</h1>
        <h1>16. Hello world</h1>
        1. Hello world
        <h1>1. Hello world</h1>
        <h1>2. Hello world</h1>
        <h1>3. Hello world</h1>
        <h1>4. Hello world</h1>
        <h1>5. Hello world</h1>
        <h1>6. Hello world</h1>
        <h1>7. Hello world</h1>
        <h1>8. Hello world</h1>
        <h1>9. Hello world</h1>
        <h1>10. Hello world</h1>
        <h1>11. Hello world</h1>
        <h1>12. Hello world</h1>
        <h1>13. Hello world</h1>
        <h1>14. Hello world</h1>
        <h1>15. Hello world</h1>
        <h1>16. Hello world</h1>
    </main>
    <footer>
                this is footer
    </footer>   
</body>
</html

css

来源：https://stackoverflow.com/questions/76533158/absolute-footer-at-the-end-of-content-and-at-the-bottom-of-viewport-display-when

2条答案

按热度按时间

r1zk6ea11#

用网格怎么样？auto表示页眉，1fr表示main，auto表示footer（如果你有所有的话）h1 footer（footer）在结尾，main之后如果你从9删除直到结尾，footer（footer）在视口的结尾

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Roboto', sans-serif !important;
  background: #f2f2f2;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-width: 250px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

main {
  margin: 0;
  overflow-x: scroll;
}

footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 0 2rem;
}

<header>
  this is header
</header>
<main>
  1. Hello world
  <h1>1. Hello world</h1>
  <h1>2. Hello world</h1>
  <h1>3. Hello world</h1>
  <h1>4. Hello world</h1>
  <h1>5. Hello world</h1>
  <h1>6. Hello world</h1>
  <h1>7. Hello world</h1>
  <h1>8. Hello world</h1>
  <h1>9. Hello world</h1>
  <h1>10. Hello world</h1>
  <h1>11. Hello world</h1>
  <h1>12. Hello world</h1>
  <h1>13. Hello world</h1>
  <h1>14. Hello world</h1>
  <h1>15. Hello world</h1>
  <h1>16. Hello world</h1>
  1. Hello world
  <h1>1. Hello world</h1>
  <h1>2. Hello world</h1>
  <h1>3. Hello world</h1>
  <h1>4. Hello world</h1>
  <h1>5. Hello world</h1>
  <h1>6. Hello world</h1>
  <h1>7. Hello world</h1>
  <h1>8. Hello world</h1>
  <h1>9. Hello world</h1>
  <h1>10. Hello world</h1>
  <h1>11. Hello world</h1>
  <h1>12. Hello world</h1>
  <h1>13. Hello world</h1>
  <h1>14. Hello world</h1>
  <h1>15. Hello world</h1>
  <h1>16. Hello world</h1>
</main>
<footer>
  this is footer
</footer>

赞(0）回复(0）举报 2023-06-25

xxb16uws2#