如何保持頁腳下來

這是頁腳如何保持頁腳下來

#footer { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 10%; 
 
    margin-top: 1%; 
 
    bottom: 0px; 
 
    top: 99%; 
 
} 
 
#copyright { 
 
    float: left; 
 
    font: normal normal normal 12px/1.3em Arial, 'ms pgothic', helvetica, sans-serif; 
 
    color: #616060; 
 
    margin-left: 15%; 
 
} 
 
#linkedin { 
 
    float: right; 
 
    margin-right: 15%; 
 
    color: #043551; 
 
    font: normal normal normal 20px Arial, 'ms pgothic', helvetica, sans-serif; 
 
}

<div id="footer"> 
 
    <div id="copyright"> 
 
    © 2016 copmpany 
 
    </div> 
 
    <div id="linkedin"> 
 
    Follow us on 
 
    <a href="https://www.linkedin.com/"> 
 
     <img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png"> 
 
    </a> 
 
    </div> 
 
</div>

這是looks like如何。這應該如何呢look like。我不想使用position:absolute，我想讓它在所有屏幕和網站的所有頁面上都能正常工作。如果我使用絕對的話，那麼當我使用手機時，它會下降太多。

我已經嘗試了一切，包括使用.container{ max-height:140%;}並將頁腳99％的距離，但沒有工作，沒有任何工作。我無法使用固定位置，因爲在我鏈接到的服務頁面上，某些屏幕上的高度會達到130％。

來源

2016-08-11 Lynob

'底部：0像素;頂部：auto;'或者爲什麼給頂部只使用'bottom'並且移除'top'，還需要在主容器中添加'padding-bottom'來爲頁腳留出空間。 – vivekkupadhyay

取出'bottom：0px; '和'top：99％' – Relisora

你的css中有'html，body {height：100％}'。將其改爲'min-height'。你的包裝div打擊通過了100％，並造成問題。您還可以將頁腳設置爲「相對」。「絕對」只適用於缺乏內容的情況，而不是。 –

此頁面不會按照您希望的方式工作，因爲它無效。一個頁面上只能有一個<!doctype html>，一個<html>，一個<head>和一個<body>，並且按該特定順序。

這是浪費時間，直到您首先解決該問題。通過這個運行你的頁面：VALIDATOR

<!doctype html> 
<html> 
<head> 
    <!--<link>, <script>, <style>, <title>, <meta> are typically here.--> 
</head> 
<body> 
    <!-- Your content <div>, <p>, <span>, etc. goes here.--> 
</body> 
</html>

你的頁面看起來是這樣的：

<!DOCTYPE html> 
<html> 
<head> 
<title>Services</title> 
</head> 
<body> 
<div class="index_wrapper"> 
<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
<title></title> 
</head> 
<body> 

    <!------CONTENT------> 

</body> 
</html> 

<div class="container"> 
<div class="service_title"> 
</div> 

<table> 
    <!--CONTENT INSIDE A TABLE LAYOUT WITH INLINE STYLES----> 
</table> 





</div> 
</div> 
</div> 

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
<div id="footer"> 
<div id="copyright"> 
© 2016 Tycron Solutions 
</div> 
<div id="linkedin"> 
    Follow us on <a href="https://www.linkedin.com/company/tycron-solutions"> 
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png"> 
</a> 

</div> 
</div> 
</body> 
</html></div> 
</body> 
</html>

來源

2016-08-11 12:52:07 zer00ne

你的CSS說：

bottom: 0px; 
top:99%;

這是沒有必要爲您的DIV已經是你的HTML的底部。如果禁止這兩行，頁腳將正確定位。

新建CSS這裏：

#footer{ 
    position: absolute; 
    width: 100%; 
    height: 10%; 
    margin-top: 1%; 
} 
#copyright{ 
    float: left; 
    font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif; 
    color: #616060; 
    margin-left: 15%; 
} 
#linkedin{ 
    float: right; 
    margin-right: 15%; 
    color: #043551; 
    font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif; 
}

來源

2016-08-11 12:32:32 Relisora

您可以更改的位置是：絕對的;定位：固定; 檢查代碼此鏈接：https://jsfiddle.net/4qyojap2/

#footer{ 
    background: #F3F5F6; 
    position: fixed; 
    width: 100%; 
    height: 30px; 
    padding:20px; 
    bottom: 0px; 
} 
#copyright{ 
    float: left; 
    font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif; 
    color: #616060; 
    margin-left: 15%; 
} 
#linkedin{ 
    float: right; 
    margin-right: 15%; 
    color: #043551; 
    font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif; 
}

來源

2016-08-11 12:36:11

你有沒有試過這種

#main-body{height:100vh;}

<header role="header"> 
 
<nav role="navigation"> 
 
    <a href="#">Home</a> 
 
</nav> 
 
</header> 
 
<div id="main-body"> 
 
    this is the main body 
 
</div> 
 
<footer role="footer"> 
 
    this is the footer 
 
</footer>

，或者你可以像使用jQuery，

//declare height of the "#main-body" 
$("#main-body").css('height' : $(window).height()+'px');

希望這個幫助。乾杯!

來源

2016-08-11 12:45:53

如何保持頁腳下來

回答

相關問題