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值here on w3.org/wiki。

来自维基：

已修复 - 根据＆＃39;绝对＆＃39;模型，该框从正常流程中取出，但在滚动时不会移动。该框的位置由＆＃39; top＆＃39;，＆＃39; right＆＃39;，＆＃39; bottom＆＃39;以及＆＃39; left＆＃39;指定。属性。

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

在这个例子中：

所有元素都设置为height: 100%，以便根据您的内容进行调整，无论数量如何。
.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;
}

Answer 2

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

Answer 3

没有位置：固定的概率。由于内容已添加了break标记，因此它会超出视口范围。所以添加溢出：滚动到页面或父元素。这将解决您的问题

Answer 4

将其添加到.middle并从float:left移除.middle：

margin-left:50%; margin-right: 50%;position:absolute;

Demo

固定头寸问题

4 个答案: