宽度：滚动条打开和关闭时，100％的像素不同

Question

我们有CSS的CSS：

<div style="width: 80%"><!--This width can be different or expressed in % -->
    <div>
        <div style="width: 50%; background-color: blue; display: inline-block;">
            <br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
        </div><!--
            --><div style="width: 50%; background-color: brown; display: inline-block;">
        <br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
        </div>
    </div>
    <div style="height: 110px; overflow-y: scroll;">
        <div style="width: 50%; background-color: yellow; display: inline-block;">
            <br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
        </div><!--
        --><div style="width: 50%; background-color: green; display: inline-block;">
        <br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
        </div>
    </div>
</div>

结果：

所有div都有50％的宽度，但是由于滚动条，底部的宽度更窄。我知道我可以计算滚动条宽度并使顶部宽度更窄，但有更好的解决方案吗？仅使用HTML / CSS的解决方案是首选。

在这里小提琴：http://jsfiddle.net/s6rhs/6/

Answer 1

您可以在这些jquery插件的帮助下为页面使用自定义jquery滚动条

https://github.com/inuyaksa/jquery.nicescroll

这样您就不会遇到浏览器默认滚动条的问题。

Answer 2

您可以使用CSS3中引入的flex布局。也许有太多的浏览器，你想支持，但他们可以使用你当前的“解决方案”。

支持：http://caniuse.com/#search=flex

如果有滚动条，右侧容器会根据滚动条的宽度略小一些，但用户不应注意这一点。

目前，背景滚动出来，但我想你会找到解决方案。

现在，我的答案不仅是文字，还有一些代码和jsfiddle给你：

CSS

.flex {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.flex > div {
    flex-grow: 1;
}

.flex > div:first-of-type {
     width: 250px;
     flex-grow: 0;
}

HTML

<div style="width: 500px">
    <div class="flex">
        <div style="background: green">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
        <div style="background: yellow">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
    </div>
    <div class="flex" style="height: 110px; overflow-y: scroll;">
        <div style="background: blue">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
        <div style="background: red">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
    </div>
</div>