我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm)，有一个脚注，我不能坐在页面的底部。
我想让页脚
当页面较短且屏幕未被填充时，坚持在窗口底部 当有超过一个屏幕的内容时，保持在文档末尾，并像往常一样向下移动(而不是重叠内容)。
CSS是继承的，让我困惑。我似乎不能正确地改变它，把一个最小高度的内容或使页脚到底部。
当前回答
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<header class='header'></header>
<div class="body-content">
<!-- all other page content -->
</div>
<footer class="footer"></footer>
</body>
</html>
html,
body{
height:100%;
}
body {
display:flex,
flex-direction: column,
}
.body-content {
flex-grow:1
}
其他回答
我实现了使用CSS网格，基本上我定义了3行:
头 内容 页脚
并且使用网格来定义大小，诀窍是在行末对齐页脚，像这样:
CSS
body {
display: grid;
grid-template-rows: auto auto auto;
}
footer {
display: grid;
align-self: end; /* The trick */
}
HTML文件
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header>
Header content
</header>
<h1>main body</h1>
<p>This is a paragraph.</p>
<footer>
<p>Hello there.</p>
</footer>
</body>
</html>
您可以使用更多的行，但请记住将其添加到CSS中，或将所有内容包装在div中。
这篇指南真的帮我找到了答案。
对我有用。
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
#{容器 身高:100 vh; 保证金:0; 显示:flex; flex-direction:列; ｝ #页脚{ margin-top:汽车; ｝ < div id = "容器" > < div id = "头" >头< / div > 身体< div id = "身体" > < / div > < div id = "脚注" >页脚< / div > < / div >
这就是所谓的粘性页脚。在谷歌上搜索它会出现很多结果。我成功地使用过CSS Sticky Footer。但还有更多。
* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } .footer, .push { height: 4em; } <html> <head> <link rel="stylesheet" href="layout.css" ... /> </head> <body> <div class="wrapper"> <p>Your website content here.</p> <div class="push"></div> </div> <div class="footer"> <p>Copyright (c) 2008</p> </div> </body> </html>
此代码的源代码
有些解决方案不适合我，但当我决定使用flex选项时，我发现最好的选择是下面的示例。
html, body{ height: 100%; } body{ display: flex; flex-direction: column; } .main-contents{ flex: 1 0 auto; min-height: 100%; margin-bottom: -77px; background-color: #CCC; } .footer{ height: 77px; min-height: 77px; width: 100%; bottom: 0; left: 0; background: #000000; flex-shrink: 0; flex-direction: row; position: relative; } .footer-text{ color: #FFF; } @media screen and (max-width: 767px){ #content{ padding-bottom: 0; } .footer{ position: relative; /*position: absolute;*/ height: 77px; width: 100%; bottom: 0; left: 0; } } <html> <body> <div class="main-contents" > this is the main content </div> </body> <footer class="footer"> <p class="footer-text">This is the sticky footer</p> </footer> </html>
<body>
<section class="wrapper">
<!--Some Content-->
</div>
<section class="footer"></section>
</body>
.wrapper {
min-height: 100vh;
}
.footer {
top: 100vh;
}
