当中心一个滚动时，使标题和侧面div保持不变

Question

我有这个布局

我需要标题，col2（左）和col3（右）保持在他们的位置，而中心一个滚动（col1）。

Answer 1

position: fixed正是您想要做的。

body {
   padding-top: 100px;
}

#header {
   width: 100%;
   height: 100px;
   position: fixed;  
   top: 0;
   left: 0;
}

jsFiddle

更新

您应该只是给内部元素一个明确的高度并添加overflow-y: auto。

Answer 2

我认为唯一的方法是将所有页面放在除标题之外的所有页面中。

将标题保持在最顶层。

<header>
    Text Text Text
</header>
<iframe src="page.html" width="100%" height="100%">
     <p>Your browser does not support iframes.</p>
</iframe>

但我很确定有很多更好的方法

Answer 3

如果它在colmask后面消失，你必须在colmask上放置top-margin，因为文档中不再处理标题。

此外，如果您希望标题超过其他元素，则使标题的z-index高于其他元素。

Answer 4

如果您的其他定位属性正确，position:fixed应该可以执行您想要的操作 - 我假设您希望将其附加到屏幕的左上角，因此您的代码将如下所示：

#header {
  position:fixed;
  top:0;
  left:0;
}

如果这不起作用，position:absolute，再次使用正确的定位属性，应该可以解决问题。

编辑：遵守OP编辑过的问题。 如果我正确理解你的问题（如果我不是，请发表评论，我会再看一遍），那么你想要这个：

#header {
  position:fixed;
  top:0;
  left:0;
}

#colleft {
  position:relative;
}

#col2 {
  position:absolute;
  /*top: however many px you want col2 to be below the top of colleft
    left: however many px you want col2 to be indented*/
}

#col3 {
  position:absolute;
  /*top: however many px you want col2 to be below the top of colleft (should be same as col2
    left: however many px you want col2 to be indented (the left positioning of col2 + its width + some padding)*/
}