Question

好的，所以我想弄清楚如何解决这个问题：

<div id="wrapper">
    <div id="header"></div>
    <div id="container></div>
    <div id="footer></div>
</div>

标题应该有position: fixed（始终位于屏幕顶部），但容器div应该从固定标题div下方开始，而不是在它下面。

页脚应始终位于页面底部。不固定。

有一种简单快捷的解决方法（CSS）吗？我可以让它“差不多”工作，但是当我尝试将容器div放在标题下方（而不是下方）时，整个页面都会混乱。

这就是我的意思： http://jsfiddle.net/jskjvpkv/1/

我找到了自己的解决方案，请参阅我的回答。

Answer 1

我不太确定你的问题是什么：

如果标题不在顶部，请在其中填写CSS：

top: auto;
bottom: 100%;

页脚应该是：

position: static;
top: 100%;
bottom: auto;

如果你有标题覆盖其他元素，你应该添加一些填充：

padding-bottom: 10px;

或者你的标题是多么大。

Answer 2

您需要将top: 0px添加到header div，然后将margin-top分配给您的container div，其等于固定header的高度，如下面的CSS：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#header {
  background: rgba(0, 0, 0, 1);
  height: 60px;
  position: fixed;
  width: 100%;
  top: 0px;
}
#container {
  margin-top: 60px;
  padding-bottom: 3.75em;
  background: #c00;
  height: 1000px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3.75em;
  background: rgba(0, 0, 0, 0.5);
}

<div id="wrapper">
  <div id="header"></div>
  <div id="container">Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.</div>
  <div id="footer"></div>
</div>

<强> jsFiddle Demo

Answer 3

你可以这样做

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  height: 100%;
  position: relative;
}
#header {
  background: rgba(0, 0, 0, 0.5);
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
#container {
  position: relative;
  top: 60px;
  background: #c00;
  min-height: calc(100% - 60px);
}
#footer {
  width: 100%;
  height: 3.75em;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="container"></div>
  <div id="footer"></div>
</div>

Answer 4

这是最适合我的解决方案：

$API_KEY = '4rxVx5-bxo7ldVQ5GcPSmX8XeqcSZoTnJnxF7xhRr8g.';
$url = "https://secure.chinavasion.com/api/getProductList.php";
$data = array(
'key' => $API_KEY,
'categories' => array('Car Video'),
'pagination' => array('count' => 999)
);

html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#header {
	background:#ededed;
	padding:10px;
}
#content {
	padding-bottom:100px;
}
#footer {
	background:#ffab62;
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
	left:0;
}

页脚总是在底部，固定页眉/高度

4 个答案: