Question

我的代码如下：

HTML：

<div id="box">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

CSS：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#box {
    width: 100%;
    height: 100%;
    margin-bottom: -50px;
    padding-bottom: 50px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: red;
}
#box > #left {
    width: 100%;
    height: 100%;
    margin-right: -210px;
    padding-right: 210px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    background: yellow;
    /*overflow-y: scroll;*/
}
#box > #right {
    width: 200px;
    height: 100%;
    display: inline-block;
    /*float: right;*/
    background: green;
    /*overflow-y: scroll;*/
}

从this fiddle可以看出，CSS源代码中有3条评论（/* ... */）。一个与位置#right相关，而另一些与滚动条的存在相关联。查看结果屏幕...您可以在#right右侧看到黄色长边。

我想使用float: right;删除此（黄色边）（要解开float: right;评论），但它不能正常工作...具体来说，#right框变为无形。我该怎么做才能解决这个问题？

然后我恢复原状（重新包装float: right;注释），然后我打开overflow-y: scroll;注释以启用滚动条。同样，它不能正常工作...... :( 滚动条叠加在同一空间上。我想正确地将#left的滚动条放在#left的右侧。遗骸是这样的。如何解决这个问题？

总结......

Q1。如何完美地定位#right？

Q2。如何完美地定位#left和#right的滚动条？

感谢。

Answer 1

我终于在3个月后找到了答案。哈哈哈...

令人惊讶的是，答案很简单。

在#left-wrap以外添加新的#left HTML标记。
添加新的#left-wrap CSS。
将所有#left CSS移至#left-wrap，但background和overflow-y除外。
在width: 100%; height: 100%; CSS中添加#left。
取消注释overflow-y: scroll;中的#left以及#right中的float: right;和#right。
要阻止#right中的停用，请添加position: relative; z-index: 10;。（如果足够大，你可以使用任何数字。）

您可以在 this fiddle 中看到结果。

<强> HTML：

<div id="box">
    <div id="left-wrap">
        <div id="left">
            Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />
            Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />
            Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />
            Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />
            Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />
            Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />
        </div>
    </div>
    <div id="right">
        Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />
        Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />
        Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />
        Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />
        Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />
        Right<br />Right<br />Right<br />Right<br />Right<br />Right<br />
    </div>
</div>

<强> CSS：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#box {
    width: 100%;
    height: 100%;
    margin-bottom: -50px;
    padding-bottom: 50px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: red;
}
#box > #left-wrap {
    width: 100%;
    height: 100%;
    margin-right: -210px;
    padding-right: 210px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
}
#box > #left-wrap > #left {
    width: 100%;
    height: 100%;
    background: yellow;
    overflow-y: scroll;
}
#box > #right {
    width: 200px;
    height: 100%;
    display: inline-block;
    float: right;
    background: green;
    overflow-y: scroll;

    /* To prevent the disabled. */
    position: relative;
    z-index: 10;
}

感谢。

我一直在使用负边距和正面填充而不是calc（），但仍存在一些问题

1 个答案: