欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何在滾動時將頁腳粘在底部(不固定)

CSS
江奕云1年前8瀏覽0評論

我希望這個頁面的頁腳貼在底部，在所有內容的下面，但不是固定在屏幕上。問題是當正文的高度超過100%時，頁腳停留在屏幕的中間，而不是底部。

我看過很多關于如何實現這一點的教程，用& quot位置:絕對& quot+& quot；底部:0 & quot但一切都失敗了。

看看這個:

<html>

<head>
  <meta charset="iso-8859-1" />
  <link rel="stylesheet" type="text/css" href="index.css" />
  <link  rel='stylesheet' type='text/css'>
  <title>Matheus's Page</title>
</head>

<body>
  <div id="wrapper">
    <header>
      <div class="title-div">
        <h1>Title</h1>
      </div>

      <nav>
        <ul>
          <li>
            <h3>Home</h3>
          </li>
          <li>
            <h3>Articles</h3>
          </li>
          <li>
            <h3>Perfil</h3>
          </li>
          <li>
            <h3>Settings</h3>
          </li>
        </ul>
      </nav>
    </header>
    <div id="body">
      <p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p>
    </div>
    <footer>
      <p>Footer</p>
    </footer>
    <div>
</body>

</html>

CSS:

body {
  font-family: 'Arvo', serif;
  height: 100%;
  margin: 0;
  padding: 0;
}

#wrapper {
  min-height: 100%;
}

header {
  position: absolute;
  float: top;
  width: 100%;
  height: 8%;
  background-color: #424242;
  color: #FFD740;
}

.title-div {
  position: absolute;
  height: 100%;
  margin: auto 5%;
  padding-right: 3%;
  border-right: solid 2px #FFD740;
}

header nav {
  position: absolute;
  width: 75%;
  left: 15%;
}

header ul {
  list-style: none outside none;
}

header ul li {
  display: inline-block;
  margin: auto 2% auto 0;
}

#body {
  padding: 10px;
  padding-top: 8%;
  padding-bottom: 15%; /* Height of the footer */
}

footer {
  position: absolute;
  width: 100%;
  height: 15%;
  right: 0;
  bottom: 0;
  left: 0;
  color: #FFD740;
  background-color: #424242;
  clear: both;
}

鏈接到結果的打印屏幕:

link to printscreen of the result

公認的答案可能有點過時，因為我們現在有了Flexbox。給容器一個min-height: 100vh，給頁腳一個margin-top: auto，這樣你就不用處理絕對定位和固定高度的問題了。

body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background-color: #FFCCCC;
}

.content {
    background-color: #CCFFCC;
}

.footer {
    background-color: #CCCCFF;
    margin-top: auto;
}

<div class="container">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>

我想這可能對你有幫助。

只是告訴你如何實現你想要的。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#header {
  background: #ededed;
  padding: 10px;
}
#content {
  padding-bottom: 100px;
  /* Height of the footer element */
}
#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
}

<div id="wrapper">

  <div id="header">
  </div>
  <!-- #header -->

  <div id="content">
  </div>
  <!-- #content -->

  <div id="footer">
  </div>
  <!-- #footer -->

</div>
<!-- #wrapper -->

我用的是Bootstrap 4，這個鏈接對我有效。

我在CSS文件(base.css)中是這樣做的:

html {
    height: 100%;
}

body {
    min-height: 100%;

    display: flex;
    flex-direction: column;
}

footer{
    padding: 3em;
    margin-top: auto;
}

我在html (base.html)中鏈接了css文件:

<head>
    <link rel="stylesheet" type="text/css" href="'<path to css>'"/>
</head>

這是對我有用的: 當我嘗試底部0和右側0時，頁腳下方有一些惱人的底部空白，不會消失。 我用top: 100%和position absolute來固定它:

body{
    height: 100%;
    width: 100%;
    position: relative;
}

footer{
    background-image: linear-gradient(to right, #c10f3f, #010168);
    padding: 1em;
    width: 100%;
    top: 100%;
    position: absolute;
}

你可以試試這個造型；

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
header {
    position: absolute;
    float: top;
    width: 100%;
    height: 8%;
    background-color: #424242;
    color: #FFD740;
}
.title-div {
    position: absolute;
    height: 100%;
    margin: auto 5%;
    padding-right: 3%;
    border-right: solid 2px #FFD740;
}

header nav {
    position: absolute;
    width: 75%;
    left: 15%;
}

header ul {
    list-style: none outside none;
}

header ul  li{
    display: inline-block;
    margin: auto 2% auto 0; 
}
footer {
    height: 100px;
    padding-top: 15px;
    padding-left: 15px;
    color: #FFD740; 
    background-color: #424242;
}

這是一個演示

@divy3993給出的答案是可行的，但有時將頁腳設為絕對會使其滯留在頁面中間。至少這是發生在我身上的事。所以我做了一個小改動，我會貼在下面

#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: relative; //make relative instead of absolute
  bottom: 0;
  left: 0;
}

試試這個:

css:

#footer
{
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
    background-color: #ffab62;
}

html:

<doctype HTML>
<HTML>
<head>
</head>
<body>
<div id = footer></div>
</body>
</HTML>

我正在使用bootstrap 4和mdboostrap，我遇到了同樣的問題。

嵌入式風格對我很有用:

<footer class="page-footer lighten-5" 
        style="position: relative; bottom:0; width: 100% !important;" >

....

</footer>

我正在使用bootstrap 3，我發現需要多種方法的組合:

下面是帶有CSS的HTML示例。希望這有所幫助！

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 </head>

<body class="site">
<header>
<!-- any content as header, like your nav menu -->
</header>

<main class="Site-content">
<div class="container-fluid">
<!-- Put your page content here -->
</div>
</main>

<footer class="footer">
<!-- put your footer content here -->
</footer>
</body>
</html>

和關聯的CSS將頁腳固定在頁面底部，而不管內容是否填滿頁面。

<style>
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

.footer {
  width: 100%;
  height: 40px; /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
}

你的第一個錯誤是在所有東西上使用絕對位置，在許多你不需要的東西上使用最小高度。

對于初學者來說，只需刪除所有絕對的東西，只在名為“body”的div中放置最小高度，默認情況下，該頁腳將被粘在#body上，此后，您的頁腳將不會到處亂飛。

在div中使用absolute的最佳方式是: -當您已經有了一個具有相對位置的div，然后您將另一個具有絕對位置的div放入一個具有相對位置的div中。

此外，只玩像素值，如果你用%開始，你會像以前一樣迷路。

使用此按鈕將位置設置為固定。