![](/img/trans.png)
[英]How do I position my footer to the bottom of the page, regardless of the size of viewport or the content?
[英]how can i center the footer text in the bottom of the page regardless of screen size
這是我的HTML代碼,我很難將電子郵件集中在頁面底部。 那么無論屏幕大小如何,我如何將頁腳文本置於頁面底部
<body>
<div class = 'container' >
<header> ****** Illustration</header>
</div>
<!-- Sign and date the page, it's only polite! -->
<footer> <a href="mailto:*******@cmail.carleton.ca">
*******@cmail.carleton.ca</a></footer>
</body>
這是我的css代碼,我嘗試將頁腳居中放在頁面的中心底部,但每次我使用不同的屏幕大小時文本的位置發生變化,我該怎樣才能避免這個問題?
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
.container {
width : 900px;
margin : 0 auto;
}
body {
background : url('images/black_background.jpg');
width: 100%;
height: 100%;
possition: absolute;
top: 0;
left: 0:
z-index: -5000;
overflow-x:hidden
}
header{
min-width: 900px;
height: 90px;
background: url('images/header.jpg') 0 0 no-repeat;
padding: 20px 0 0 0;
color: white;
position: relative;
right: -85x;
color: white;
font-size: 3em;
font-family: Lucida Handwriting;
}
nav{
width: 900px;
height: 40px;
margin: 0 auto;
color: white;
background: url();
position: relative;
right: 250px;
top: -40px;
height: 90px;
min-width: 900px;
}
/*#content{
width: 900px;
height: 650px;
position: relative;
left: -45px;
background:url('images/himba_tribes.jpg');
}
*/
footer{
position:absolute;
bottom:-40;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
border: 4px solid orange;
clear: both;
}
如果要水平居中鏈接,請使用text-align: center;
在頁腳上。 如果你想讓它粘在窗戶的底部,請使用粘滯頁腳 !
試試這個:將頁腳設為div:
<div id="footer">your@email</div>
CSS應該是:
#footer { clear: both; margin: 0 auto; text-align: center}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.