jquery - 固定位置问题

Question

我的布局是 3 列布局。左侧固定在左侧。右边固定在右边。中间部分只能滚动。

对于左侧，我使用了以下 CSS:

.left {
    position:fixed;
    left:0px;
    width:50px;
    background-color:#ccc;
    float:left
}

对于右侧，我使用了以下 CSS:

.right {
    position:fixed;
    right:0px;
    width:100px;
    background-color:#ccc;
    float:right
}

两栏内容都很大。如果我使用position:fixed;，我无法查看完整内容。我完全糊涂了。

我需要将 Left 和 right 固定到左侧和右侧。我也想查看我的全部内容。是否可以？？？

http://jsfiddle.net/SM5e9/

Answer 1

position: fixed 用于在滚动时保持元素附加到视口(viewport)。阅读有关 position 值的更多信息 here on w3.org/wiki .

来自维基:

Fixed - According to the 'absolute' model, the box is taken out of the normal flow but does not move when scrolled. The box's position is specified with the 'top', 'right', 'bottom', and 'left' properties.

---

也就是说，我假设您想要三列布局。一种简单的方法是使用 display: table。

在这个例子中:

1. 所有元素都设置为 height: 100% 以适应您的内容，无论数量如何。

2. .wrap 包含带有 display:table 的列，然后将它们与 display: table-cell;

   对齐>

Have a jsBin Example!

Here is the wiki page对于 w3.org 上的 display 属性。

HTML

<div class="wrap">
    <div class="left">
    </div>
    <div class="content">
    </div>
    <div class="right">
    </div>
</div>

CSS

* {
    margin: 0;
    padding:0;
}
html,body {  
    height: 100%;
}
.wrap, .left, .right, .content {
    height: 100%;
    vertical-align: top;
}
.wrap {
    background: #999;
    width: 400px;
    margin: 0 auto;
    display: table;
}
.left {
    width: 50px;
    background: #F00;
    display: table-cell;
}
.right {
    width: 100px;
    background: #FF0;
    display: table-cell;
}