Question

我有这个脚本：

我设法让#middle DIV自动填充页面，但我需要修正正确的div并且内容仍然表现相同。我真的陷入了困境，并且不知道该怎么做。我需要一个想法。

HTML

<div id="container">
    <div id="middle">Middle</div>
    <div id="right">Right</div>
</div>

CSS

*{
    margin: 0px;
    padding: 0px;
}
body, html{
    height: 100%;
}

#container {
    display: table;
    width: 100%;
    height: 100%;
}

#middle, #right {
    display: table-cell;
    height: 100px;
}

#right {
    width: 150px;
    background: #1f1f1f;
    height: 100%;
    color: white;
}

#middle {
    background: white;
}

Answer 1

您是否尝试在#right上使用固定位置？

position: fixed;
right: 0;
top: 0;

Answer 2

如果您设置右侧面板的属性，如下所示：

position:fixed;
right:0;
top:0;

您将获得所需的功能。问题是，固定属性将＆＃34;正常流＆＃34;中的div删除，并且它将与中间div重叠。要解决此问题，您可以设置中间div的位置，然后使用CSS calc（）函数调整宽度：

position:absolute;
top:0;
left:0;
width: calc(100% - 150px);

150px是右边div的宽度。注意 - 周围的空间，它们非常重要！

jsFiddle

一个div固定，其他自动填充页面

2 个答案: