1

据我所知，绝对定位元素和浮动元素已从正常的 html 流中删除（如果我错了，请纠正我）。

这是我的jsFiddle

这是我的代码：

<header> </header>
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area"></div>
<div class="right-sidebar"></div>
</div>
<footer> </footer>

我的CSS：

.content-area {
position: relative;
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
position:absolute;
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
position: absolute;
right: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}

当我在里面写任何东西时，main-area为什么右侧边栏会向下滑动。

4

3 回答 3

4

将top属性添加到侧栏

.right-sidebar {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}

指定位置后，absolute您应该定位元素，这意味着您必须将其top、bottom和属性设置为您想要的值。如果未设置这些属性之一，浏览器会定位它们，因为它们将被设置为.leftrightauto

于 2013-08-09T14:56:20.273 回答
2

正如他们告诉你的那样，top:0修复它。

好的，原因：

检查此链接：http ://dev.w3.org/csswg/css-position/#abs-non-replaced-height

您正在寻找的部分是第二条规则：（我添加的重点）

如果 'top' 和 'bottom' 是 'auto' 而 'height' 不是 'auto'，则将'top' 设置为静态位置，然后求解 'bottom'。

这就是原因。请记住，top默认为autonot0。

于 2013-08-09T15:09:43.760 回答
0

添加顶部：0；到你的右边吧。之后它不应再向下推。

于 2013-08-09T14:57:06.530 回答