固定位置问题

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;，我不能查看完整的内容。我完全糊涂了。

我要把左右两边都钉住。我也想查看我的全部内容。有可能吗？

http://jsfiddle.net/SM5e9/

Answer 1

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

来自维基：

Fixed -根据“绝对”模型，框将从正常流程中取出，但滚动时不会移动。框的位置由“top”、“right”、“bottom”和“left”属性指定。

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

在此示例中：

无论quantity.

• .wrap是否包含带有display: table-cell;

的列，

1. 所有元素都设置为height: 100%，以便根据您的内容进行调整

Have a jsBin Example!

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

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;
}

Answer 2

我认为查看完整内容的唯一方法是减小内容的大小。(在您的示例中为font-size )。或者不使用固定定位。取而代之的是绝对定位。我希望这能有所帮助。

Answer 3

Position:fixed没有问题。由于内容是使用中断标记添加的，因此它会向下移动到视口之外。因此添加溢出:滚动到页面或父元素。这会解决你的问题