CSS：如何将页脚附加到页面的底部

我想将页脚附加到页面的底部。为了做到这一点，我使用了其他类似主题中推荐的绝对位置。但是由于未知原因，页脚的行为就好像它是固定的，而不是绝对的。CSS：如何将页脚附加到页面的底部

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    font-family: "Times New Roman", Times, serif; 
 
    font-size: 20px; 
 
} 
 

 
header { 
 
    background: rgba(150, 150, 150, 0.5); 
 
    border-bottom: solid 1px; 
 
    width: 100%; 
 
    text-align: center; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 

 
main { 
 
    padding-top: 5px; 
 
    padding-left: 100px; 
 
    padding-right: 100px; 
 
    padding-bottom: 60px; 
 
} 
 

 
footer { 
 
    border-top: solid 1px; 
 
    background: rgba(150, 150, 150, 0.5); 
 
    width: 100%; 
 
    height: 40px; 
 
    padding-top: 10px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    text-align: center; 
 
}

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

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <title>Index</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    This is header 
 
    </header> 
 

 
    <main> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    </main> 
 

 
    <footer> 
 
    This is footer 
 
    </footer> 
 
</body> 
 

 
</html>

画面1：屏幕2：

页脚应该坚持与页面的下边缘，而是仍然坚持使用浏览器的下边缘。怎么了？

来源

2017-05-30 sva605

为什么不直接使用'位置：relative'？ – Tom

http://plnkr.co/edit/o5aTdu4iLGSVIWxi3sUu看看这个。只需删除3条CSS规则，并让页脚自然移动到页面底部 – Bramastic

@ thebluefox，因为如果内容不填充屏幕，那么页脚不会位于视口的底部，我认为OP是想要一个粘性页脚，它将位于内容底部或屏幕底部，以较大者为准 – Pete

您已将身高设置为100％，因此您的身体只会与视口一样高。尝试使用min-height对身体（也相对位置添加到体）：

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100%; 
 
    width: 100%; 
 
    font-family: "Times New Roman", Times, serif; 
 
    font-size: 20px; 
 
} 
 

 
header { 
 
    background: rgba(150, 150, 150, 0.5); 
 
    border-bottom: solid 1px; 
 
    width: 100%; 
 
    text-align: center; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 

 
main { 
 
    padding-top: 5px; 
 
    padding-left: 100px; 
 
    padding-right: 100px; 
 
    padding-bottom: 60px; 
 
} 
 

 
footer { 
 
    border-top: solid 1px; 
 
    background: rgba(150, 150, 150, 0.5); 
 
    width: 100%; 
 
    height: 40px; 
 
    padding-top: 10px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    text-align: center; 
 
}

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

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <title>Index</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    This is header 
 
    </header> 
 

 
    <main> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p> 
 
    </main> 
 

 
    <footer> 
 
    This is footer 
 
    </footer> 
 
</body> 
 

 
</html>

来源

2017-05-30 09:20:29 Pete

无需指定位置的页脚，也卸下底部和左侧。您需要指定每个部分的高度（以％表示）。试试下面的CSS，

html, body { 
margin: 0; 
padding: 0; 
height: 100%; 
width: 100%; 
font-family: "Times New Roman", Times, serif; 
font-size: 20px; 
} 

header { 
height:10%; 
background: rgba(150,150,150,0.5); 
border-bottom: solid 1px; 
width: 100%; 
text-align: center; 
padding-top: 20px; 
padding-bottom: 20px; 
} 

main { 
height:80%; 
padding-top: 5px; 
padding-left: 100px; 
padding-right: 100px; 
padding-bottom: 60px; 
} 

footer { 
height:10%; 
border-top: solid 1px; 
background: rgba(150,150,150,0.5); 
width: 100%; 
height: 40px; 
padding-top: 10px; 
text-align: center; 
}

这里，如果在大或有人屏幕尺寸缩小屏幕，或者如果在页面内容非常少，页脚将始终保持在页面的底部。

来源

2017-05-30 09:27:52

-1

如果您可以使用flexbox，那就是您的解决方案。看看这里的CSS技巧 - 你不需要更多。 https://css-tricks.com/couple-takes-sticky-footer/

HTML：

<body> 
    <div class="content"> 
    content 
    </div> 
    <footer class="footer"></footer> 
</body>

CSS：

html, body { 
    height: 100%; 
} 
body { 
    display: flex; 
    flex-direction: column; 
} 
.content { 
    flex: 1 0 auto; 
}

来源

2017-05-30 09:28:29 Samuell

CSS：如何将页脚附加到页面的底部

回答

相关问题