页面不会滚动；使用 CSS 固定位置表答案

【问题标题】：Page won't scroll; using CSS fixed position tables页面不会滚动；使用 CSS 固定位置表
【发布时间】：2013-08-19 20:18:43
【问题描述】：

我已经好几年没有做任何繁重的 HTML/CSS 工作了，最近我开始对我公司的网站进行大修。我对设计的结果非常满意，一切似乎都正常，但现在我的内容填满了页面，我意识到页面不会滚动，尽管“折叠”下方有内容。

我猜这是因为我使用的是固定位置的 CSS 表格。我尝试将位置属性更改为“相对”，虽然这解决了滚动问题，但它弄乱了布局，我不知道如何使它工作。

这是我的代码的小提琴：http://jsfiddle.net/jbooth63/SKnsc/

这里是代码实时预览的链接：http://www.financecapital.us/test/test.html

任何帮助将不胜感激！这是我正在使用的代码示例：

<head>
<style type="text/css">
body,td,th {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 10px;
color: #333;}

body {
background-color: #fff;}

.socialcell {
position: fixed;
margin-top: 105px;
margin-left: 5px;
background-color: #ff9900;}


.headerimg {
position: fixed;
margin-left: 5px;
margin-top: 5px;}

.leftsidebar {
position: fixed;
margin-top: 155px;
margin-left: 5px;
background-color: #eee;
border-right: .1em dotted #369;
border-bottom: .1em dotted #369;}
</head>
<body>
<div class="headerimg"><img src="header2.jpg" title="Financing the world's equipment.">    
</div> 

<div class="socialcell">
<table width="300" height="50">
<tr>
<td><center>
<a href="https://www.facebook.com/financecapitalut"><img src="facebook.png" title="Finance 
Capital on Facebook" height="40"></a>
<a href="http://www.linkedin.com/company/finance-capital-llc?trk=hb_tab_compy_id_477909#">  
<img src="linkedin.png" title="Finance Capital on LinkedIn" height="40"></a>
<a href="https://twitter.com/FinanceCap"><img src="twitter.png" title="@FinanceCap on 
Twitter" height="40">
</center></td>
</tr>
</table>
</div>

【问题讨论】：

为什么这被否决了？

标签： html css scroll css-position fixed

【解决方案1】：

朋友，这很简单，我自己使用 chrome 开发工具完成的。

问题在于您使用的是：“位置：固定；”在你的 div 上。

使用“位置：绝对；”在每个 div 上，都应该可以工作。

希望对你有所帮助。

【讨论】：

这是正确的。这是一个小提琴，显示当您将所有 position: fixed; 更改为 position: absolute; jsfiddle.net/QEwRG 时会发生什么
修复了它。谢谢 - 你是我的英雄！
@DrydenLong 该链接现已损坏。