我创建了一个div，它固定在底部。问题是它隐藏了html页面的数据。
这是小提琴。
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
/* For the demo only */
#content {
background: #D0E5FF;
padding: 20px;
color: #00214B;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 1.8;
}
#footer {
background: #0070FF;
line-height: 2;
text-align: center;
color: #042E64;
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B
}<div id="content">
1) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
2) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
6) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
1) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
2) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
6) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
</div>
<div id="footer">Footer - Just scroll...</div>
请告知如何显示固定div背后的数据。
答案 0 :(得分：1)
你可以使用以下css：
body {
padding-bottom: 60px;
}
答案 1 :(得分：1)
您可以为内容添加边距或填充以匹配页脚高度。
#content {
padding-bottom: 100px; /* accomodate for the footer height */
}
当您知道页脚本身的高度时，这种方法效果最佳。如果您事先不知道，可以使用JavaScript动态更新填充。
它的工作原理是在普通元素流中的内容下创建空间。当页脚定位为固定时，它将从此正常流程中取出，因此您必须适应其维度以防止内容在正常流程中隐藏。
您还可以使用margin-bottom创建空间。不同之处在于，使用padding您可以在内容div内创建 空间，因此背景将在页脚下方流动。使用margin，您可以在div之后创建空格，背景将在＆＃34;结束＆＃34;在页脚之前。
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
/* For the demo only */
#content {
background: #D0E5FF;
padding: 20px;
color: #00214B;
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 1.8;
}
#footer {
background: #0070FF;
line-height: 2;
text-align: center;
color: #042E64;
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B
}
#content {
padding-bottom: 100px; /* accomodate for the footer height */
}<div id="content">
1) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
2) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
6) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
1) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
2) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
6) Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
Lorum Ipsum Dolor Sit Amet<br />
</div>
<div id="footer">Footer - Just scroll...</div>
答案 2 :(得分：1)
设置内容div的底部边距
#content {
background: #d0e5ff none repeat scroll 0 0;
color: #00214b;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 1.8;
margin-bottom: 60px;/*Add this*/
padding: 20px;
}
答案 3 :(得分：1)
基于保证金或填充的答案应该有效，但它有点黑客，我不想依赖它在所有浏览器中工作。另请注意，即使它正常工作，右侧滚动条也会一直沿着页面向下运行，即使在页脚旁边 - 由于页脚不会滚动，因此会误导用户界面。
更好的解决方案是为内容div指定高度，并将其select distinct combined_col from (select alpha `combined_col` from table union select beta from table union select gamma from table) tab_alias where COMPLICATED_WHERE_STATEMENT;
设置为overflow-y。指定高度是棘手的部分......
如果你使用足够新的CSS，那么flexbox对此有好处。
如果您无法使用flexbox，我会尝试将每个div的高度调整为视口的一小部分 - 即内容可能为90vh，页脚可能为10vh。如果您还可以动态调整页脚中的内容，则效果最佳。
如果你不能使用vh单位作为页脚，那么我以前总是依赖的是使用JavaScript来计算页脚的大小，从视口的高度减去它，并设置内容相应的高度。在布局中涉及JavaScript很难看，但有时候还需要预先的弹性框。