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

頁腳位于頁面或內(nèi)容的底部，以較低者為準(zhǔn)

CSS

我有以下結(jié)構(gòu):

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

我在& lt文章& gt使用javascript。正因?yàn)槿绱耍? lt文章& gt街區(qū)可以改變。

我想要& lt頁腳& gt塊在有大量內(nèi)容時(shí)位于頁面底部，或者在只有幾行內(nèi)容時(shí)位于瀏覽器窗口底部。

目前我只能做其中的一個(gè)...但不是兩者都有。

有人知道我該怎么做嗎——獲取& lt頁腳& gt粘在頁面/內(nèi)容的底部或屏幕的底部，取決于哪個(gè)更低。

Ryan Fait的粘性頁腳非常好，但是我發(fā)現(xiàn)它的基本結(jié)構(gòu)有所欠缺。

Flexbox版本 如果你足夠幸運(yùn)，可以使用flexbox而不需要支持舊的瀏覽器，那么粘性頁腳變得非常容易，并且支持動(dòng)態(tài)大小的頁腳。

使用flexbox讓頁腳緊貼底部的技巧是讓同一容器中的其他元素垂直伸縮。它所需要的是一個(gè)完整的l高度包裝元素，包含display: flex和至少一個(gè)flex值大于0的同級(jí)元素:

CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Ryan Fait的粘滯頁腳是一個(gè)簡單的解決方案，我在過去使用過幾次。

基本HTML:

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

將它翻譯成類似于您已經(jīng)得到的結(jié)果，結(jié)果如下:

HTML:

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

只是不要忘記更新包裝頁邊空白的負(fù)數(shù)，以匹配你的頁腳和按下div的高度。祝你好運(yùn)！

我希望在不添加任何額外標(biāo)記的情況下解決這個(gè)問題，所以我最終使用了以下解決方案:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}

<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

我想用css-grid來解決這個(gè)問題。我將在#main-wrapper div中分成兩部分。第一個(gè)是內(nèi)容，第二個(gè)是頁腳。

// HTML 

<body>
<div id="main-wrapper">
  <div class="main-content">
    <header></header>
    <nav></nav>
    <article></article>
  </div>
  <footer class="footer">
    footer
  </footer>
</div>
</body>

在css中

#main-wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: #a45657;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 20px;
}

你可以在這里查看工作演示(請(qǐng)查看項(xiàng)目視圖)。 這段代碼摘自我最喜歡的CSS網(wǎng)站css-tricks。

2023年——這是唯一的css解決方案。讓90vh適合你的腳。

<div style= "min-height:90vh">
    ... your content
</div>
<div>
   ... your footer
</div>