Question

我创建了一个容器<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;
}

Answer 1

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

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

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

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

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

Answer 2

您不应该使用min-width。

直播Demo

修改

如果您想将min-width与position: fixed一起使用，则应使用top和right css。如果您不想遇到浏览器问题，请使用 reset.css

直播Demo

使用display：table-cell with position：fixed

2 个答案: