1

我做了一个容器<div>，里面有两个<div>：一个是宽度 80%，另一个是 20%，需要position:fixed。

由于某种原因，容器的总宽度比<div>浏览器窗口长。

一旦我删除position:fixed右边的<div>一切都是为了，但我确实需要<div>它position:fixed。

这是我的代码：

HTML

<div class="test">
    <div class="leftSummary"></div>
    <div class="rightTasks"></div>
</div>

CSS

.test {
    width: 100%;
    display: table;
}
.leftSummary {
    width: 80%;
    display: table-cell;
}
.rightTasks {
    width: 20%;
    min-width: 275px;
    display: table-cell;
    vertical-align: top;
    position: fixed;
}
4

2 回答 2

4

这里有一个基本问题。设置position: fixed为 on.rightTasks后，显示属性将计算为block而不是table-cell.

这将相应地更改布局，您需要重新考虑您的标记。

参考：http ://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

此外， 元素position: fixed相对于视口定位，而不是包含它们的块元素。因此，20% 的宽度是相对于视口而不是.test父级的。

如果您检查.rightTasks元素，您将看到宽度是视口宽度的 20%，而不是表格宽度的 20%。如果将表格宽度设置为 50%，效果会更加明显。

于 2013-10-22T11:12:30.583 回答
0

你不应该使用min-width.

现场演示

编辑

如果你想使用min-widthwith position: fixed，你应该使用topand rightcss。如果你不想遇到浏览器的问题，你应该使用reset.css

现场演示

于 2013-10-22T11:09:53.063 回答