1. 首頁
  2. 問答
  3. 在底部粘貼CSS頁腳

在底部粘貼CSS頁腳

2016-11-17 99 views
0

儘管嘗試了大量搜索方法，但我似乎無法使此頁腳粘在底部。在底部粘貼CSS頁腳

基本上，我在頂部有一個箱子的陰影與頁面的其餘部分分開，我想在底部的相同，在中間的內容，任何想法我做錯了什麼？我已經嘗試了位置固定，底部0，但我不能讓箱子陰影顯示使用這些方法或保持居中。

謝謝！

html { 
 
    overflow-y: scroll; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #ffffff; 
 
    font-family: 'Ubuntu', sans-serif; 
 
} 
 
div { 
 
    display: block; 
 
} 
 
.header-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
.container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    width: 940px; 
 
} 
 
.container:before, 
 
.container:after { 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header { 
 
    height: 60px; 
 
    padding: 20px 0 25px 0; 
 
} 
 
#header .logo { 
 
    float: left; 
 
} 
 
#header .logo a { 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px; 
 
    background-size: 270px 60px; 
 
} 
 
#header .american-flag { 
 
    display: block; 
 
    float: right; 
 
} 
 
#header .american-flag img { 
 
    max-height: 60px; 
 
} 
 
#content { 
 
    height: 100%; 
 
    padding: 20px 0 0 0; 
 
} 
 
body a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
body a:hover { 
 
    text-decoration: underline; 
 
} 
 
.footer-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
#footer { 
 
    line-height: 60px; 
 
    height: 60px; 
 
}
<html> 
 

 
<body> 
 
    <div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
     <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     FLAG 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container" id="content"> 
 
    Site content 
 
    </div> 
 
    <div class="footer-wrapper"> 
 
    <div class="container" id="footer"> 
 
     footer 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-11-17 Tom

+1

你想讓頁腳處於最底部，那會有盒子陰影，它的內容居中？ – GiuServ

回答

1

我已將Ryan Fait's sticky footer應用於您的標記。

html, 
 
body { 
 
    height: 100%; 
 
} 
 
html { 
 
    overflow-y: scroll; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #ffffff; 
 
    font-family: 'Ubuntu', sans-serif; 
 
} 
 
div { 
 
    display: block; 
 
} 
 
.wrap { 
 
    min-height: 100%; 
 
    margin-bottom: -60px; 
 
} 
 
.header-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
.container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    width: 940px; 
 
} 
 
.container:before, 
 
.container:after { 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header { 
 
    height: 60px; 
 
    padding: 20px 0 25px 0; 
 
} 
 
#header .logo { 
 
    float: left; 
 
} 
 
#header .logo a { 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px; 
 
    background-size: 270px 60px; 
 
} 
 
#header .american-flag { 
 
    display: block; 
 
    float: right; 
 
} 
 
#header .american-flag img { 
 
    max-height: 60px; 
 
} 
 
#content { 
 
    height: 100%; 
 
    padding: 20px 0 0 0; 
 
} 
 
body a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
body a:hover { 
 
    text-decoration: underline; 
 
} 
 
.footer-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
#footer { 
 
    line-height: 60px; 
 
    height: 60px; 
 
}
<div class="wrap"> 
 
    <div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
     <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     FLAG 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container" id="content"> 
 
    Site content 
 
    </div> 
 
</div> 
 
<div class="footer-wrapper"> 
 
    <div class="container" id="footer"> 
 
    footer 
 
    </div> 
 
</div>

來源

2016-11-17 15:36:41 hungerstar

+0

完美的工作，出色的工作。 – Tom

1

檢查以下CSS

.footer-wrapper 
{ 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    bottom: 0px; /* add this line */ 
    position:fixed; /* add this line */ 
}

希望這會有所幫助。

來源

2016-11-17 15:36:13 reza

+0

這確實堅持它的底部謝謝，但它離開頁腳偏離中心 – Tom

+1

有幾個修復程序，將需要應用於此答案。首先，將'width：100％;'設置爲'.footer-wrapper'。然後，您需要在'＃content'上設置一個與頁腳高度相等的底部邊距，以便由於固定的位置，內容不會被重疊的頁腳元素隱藏。 – hungerstar

1

您可以使用CSS的calc()功能與min-height財產。

像：

#content { 
    min-height: calc(100vh - 200px); // Viewport Height (100%) - Remaining space of the content & header (135px) 
}

看一看下面的代碼片段：

html 
 
{ 
 
/* \t overflow-y: scroll; */ 
 
} 
 
body \t 
 
{ 
 
\t margin:0; 
 
\t background-color:#ffffff; 
 
\t font-family:'Ubuntu',sans-serif; 
 
} 
 
div 
 
{ 
 
\t display:block; 
 
} 
 
.header-wrapper 
 
{ 
 
\t -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
} 
 
.container 
 
{ 
 
\t margin-right:auto; 
 
\t margin-left:auto; 
 
\t width:940px; 
 
} 
 
.container:before, .container:after 
 
{ 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header 
 
{ 
 
\t height:60px; 
 
\t padding:20px 0 25px 0; 
 
} 
 
#header .logo 
 
{ 
 
\t float:left; 
 
} 
 
#header .logo a 
 
{ 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url('/test/_assets/img/header-logo.png') no-repeat 0px 1px; 
 
\t background-size: 270px 60px; 
 
} 
 
#header .american-flag 
 
{ 
 
\t display:block; 
 
\t float:right; 
 
} 
 
#header .american-flag img 
 
{ 
 
\t max-height:60px; 
 
} 
 
#content 
 
{ 
 
\t height:100%; 
 
\t padding:20px 0 0 0; 
 
} 
 
body a 
 
{ 
 
\t color:red; 
 
\t text-decoration:none; 
 
} 
 
body a:hover 
 
{ 
 
\t text-decoration: underline; 
 
} 
 
.footer-wrapper 
 
{ 
 
\t -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
} 
 
#footer 
 
{ 
 
\t line-height:60px; 
 
\t height:60px; 
 
} 
 

 
#content { 
 
    min-height: calc(100vh - 185px); 
 
}
<div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
      <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     \t FLAG 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container" id="content"> 
 
Site content 
 
</div> 
 
<div class="footer-wrapper"> 
 
\t <div class="container" id="footer"> 
 
\t footer 
 
\t </div> 
 
</div>

希望這有助於！

來源

2016-11-17 15:37:30

+1

視口和頁腳底部之間存在間隙。 – hungerstar

+1

@hungerstar看看我更新的代碼！ –

1

您需要添加以下到.footer-wrapper類：

.footer-wrapper { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    width: 100%; 
}

這裏是它在行動小提琴，因爲它不看的代碼片段一樣好：https://jsfiddle.net/jm2rveqc/

html { 
 
    overflow-y: scroll; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-color: #ffffff; 
 
    font-family: 'Ubuntu', sans-serif; 
 
} 
 
div { 
 
    display: block; 
 
} 
 
.header-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 
.container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    width: 940px; 
 
} 
 
.container:before, 
 
.container:after { 
 
    display: table; 
 
    line-height: 0; 
 
    content: ""; 
 
} 
 
#header { 
 
    height: 60px; 
 
    padding: 20px 0 25px 0; 
 
} 
 
#header .logo { 
 
    float: left; 
 
} 
 
#header .logo a { 
 
    display: block; 
 
    width: 270px; 
 
    height: 60px; 
 
    text-indent: -999em; 
 
    line-height: 60px; 
 
    background: url(/test/_assets/img/header-logo.png) no-repeat 0px 1px; 
 
    background-size: 270px 60px; 
 
} 
 
#header .american-flag { 
 
    display: block; 
 
    float: right; 
 
} 
 
#header .american-flag img { 
 
    max-height: 60px; 
 
} 
 
#content { 
 
    height: 100%; 
 
    padding: 20px 0 0 0; 
 
} 
 
body a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
body a:hover { 
 
    text-decoration: underline; 
 
} 
 
.footer-wrapper { 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
#footer { 
 
    line-height: 60px; 
 
    height: 60px; 
 
}
<html> 
 

 
<body> 
 
    <div class="header-wrapper"> 
 
    <div class="container" id="header"> 
 
     <div class="logo"> 
 
     <a href="/">URL</a> 
 
     </div> 
 
     <div class="american-flag"> 
 
     FLAG 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container" id="content"> 
 
    Site content 
 
    </div> 
 
    <div class="footer-wrapper"> 
 
    <div class="container" id="footer"> 
 
     footer 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-11-17 15:40:40

+0

頁邊距需要應用於與頁腳高度相等的內容元素，以避免重疊頁腳元素隱藏內容。 – hungerstar

-1

是不是很滿足？

#footer { 
     line-height: 60px; 
     height: 60px; 
     position:absolute; 
     bottom:0; 
    }

來源

2016-11-17 15:42:43 Matoeil

+0

你試過這個嗎？它實際上工作嗎？ – hungerstar

+0

好的。爲什麼要投票？ http://codepen.io/matoeil/pen/Woopdq – Matoeil

+0

它不起作用。也許有一些內容[用戶必須滾動]（http://codepen.io/anon/pen/dOOWxb）。 – hungerstar

0

我會簡單地使用Flexbox的對於這些情況。

簡單地改變

html { 
    overflow-y: scroll; 
}

到

html, body { 
    height: 100%; 
}

添加display: flex和flex-direction: column你的身體

body { 
    margin: 0; 
    background-color: #ffffff; 
    font-family: 'Ubuntu', sans-serif; 
    display: flex; 
    flex-direction: column; 
}

最後加margin-top: auto到您的頁腳包裝

.footer-wrapper { 
    margin-top: auto; 
}

來源

2016-11-17 15:52:19 SvenL

相關問題

 相關問題