Question

我正在开展一个有很多网页的项目。基本上我为每个页面创建了三个div标记：

标题
身体（内容）
Foother

但问题在于，我声明了body div标签的大小，其中包含页面的主要部分，如表单，任何描述等。

根据我的屏幕尺寸，这个很小，所以我声明并绝对/固定min-height: 450px。

但是当我在其他具有更大屏幕尺寸的计算机上运行此代码时，页脚放错了位置（在屏幕中间）。那么我现在该怎么做才能始终将页脚保持在屏幕底部，调整屏幕大小？

Answer 1

在页脚上使用position:absolute;。默认情况下，页脚相对于html元素定位，但如果您将position:relative;应用于正文，则正文将成为参考。

即使内容不多，也要将其置于最底层，使用height:100%;上的body以及html。

通过position:absolute;，您可以将其置于html内容的底部。因此，当内容很长时，它将无法显示，您必须向下滚动才能看到它。但即使内容很长，如果你想将它放在屏幕的底部，那么请使用position:fixed;

以下是一个工作片段。

＆＃13;

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
body{
  position:relative;
}
footer{
  position:absolute;
  height:50px;
  background-color:red;
  bottom:0;
  left:0;
  width:100%;
}

＆＃13;

<footer>footer Here</footer>

＆＃13;

Answer 2

基本上你使用亲戚的位置，但你保持流畅的布局而不用担心身高，所以我创建了下面的代码，页脚总是位于主要内容所包含的主要内容之下。

＆＃13;

* {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, 
html {
     height: 100%;
}
header,
main,
footer{
	position: relative;
	float: left;
	width: 100%;

}
header {
		background: black;
		min-height: 10px;
}
main {
	min-height: 450px;
		background: gray;
}
footer {
	background: black;
	min-height: 10px;
}

＆＃13;

<header></header>
<main></main>
<footer></footer>

＆＃13;

如何始终将页脚保持在页面底部，调整屏幕大小

2 个答案: