如何忽略CSS中的滚动条宽度？

Question

Explanation

I want to line up three boxes in one line horizontally but the last one falls down.

When I remove the scrollbar, it lines up fine.

So, the problem is caused by the scrollbar width.

How can I ignore the scrollbar width in css?

Do I need to write JavaScript code to calculate the scrollbar width and adjust the width of the wrapper dom element?

DEMO & CODE

I posted html and css code in codePen.io.

http://codepen.io/anon/pen/kXAPap

HTML

<div id="main">

    <ul id="window-list">

        <li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li>


    </ul>

</div>

CSS

body {
    border-top: solid 1px #a3a1a3;
    margin: 0;
    padding: 20px;
    background-color: #e7e7e7;
}

ul, li, p {

    margin: 0;
    padding: 0;

}

/*
1px(border-left) + 30px(padding-left) + 158px(width) + 18px(margin-right) + 158px(width) + 18px(margin-right) + 158px(width) + 30px(padding-right) + 1px(border-right) = 572px
*/

#main {
    width: 572px;
}


#window-list {

    background-color: #ffffff;
    border: solid 1px #b8b8b8;
    width: 510px;
    height: 350px;
    margin: 0 0 8px 0;
    overflow: scroll; /*This line causes the problem*/
    padding: 10px 30px;
    list-style-type: none;


}

.window {
    display: inline-block;
    margin: 0 18px 18px 0;


}

.window:nth-child(3n) {

    margin-right: 0;

}

.window-thumbnail {

    margin: 0 0 8px 0;
    height: 158px;
    width: 158px;
    border-radius: 8px;
    cursor: pointer;
    background-color: #e0e0e0;
}

Answer 1

One way to do it in pure CSS is to make the scroll bar invisible completely. This will still allow scrolling.

::-webkit-scrollbar { 
display: none; 
}

You can also use jQuery to achieve exactly what you wanted:

$(document).ready(function(){
    var body = $('body');
    var normalwidth = 0;
    var scrollwidth = 0;
    if(body.prop('scrollHeight')>body.height()){
        normalwidth = window.innerWidth;
        scrollwidth = normalwidth - body.width();
        $('#main').css({marginRight:'-'+scrollwidth+'px'});
    }
});

And you can hide the horizontal scroll using:

body {
    overflow-x:hidden;
}

Here's a jsfiddle made by Lwym .
I suggest you check out his original answer too.

Answer 2

Unless it is a business requirement to give these boxes a fixed, I would strongly recommend you to give them a variable width using percentage units which will make your document more responsive to different viewport widths and screen sizes.

 .container { display: block; width: 100%; padding: 0; margin: 0; } .container .box { display: inline-block; background-color: #ddd; width: 28%; height: 80px; margin: 20px 0 20px 4%; border: 1px solid #ddd; border-radius: 3px; overflow: hidden; } 

 <div class="container"> <div class="box"></div><!-- --><div class="box"></div><!-- --><div class="box"></div><!-- --><div class="box"></div><!-- --><div class="box"></div> </div> 

Things to note

1- This solution is 99% CSS2-compatible...some features will degrade gracefully such as the border-radius which is currently supported by all major browsers out there

2- you said it doesn't need to be responsive because it's a chrome extension. Well, it does because desktops come in a lot of screen sizes. So, it is responsive

3- I've given the boxes a fixed height to make them look uniform but if you want a variable height you can wrap the boxes in containers with a group of 3 boxes each

Answer 3

If these have to be fixed, I would highly recommend using flex for this. Here is your CSS using Flex:

body {
    border-top: solid 1px #a3a1a3;
    margin: 0;
    padding: 20px;
    background-color: #e7e7e7;
}

ul, li, p {

    margin: 0;
    padding: 0;

}

/*
1px(border-left) + 30px(padding-left) + 158px(width) + 18px(margin-right) + 158px(width) + 18px(margin-right) + 158px(width) + 30px(padding-right) + 1px(border-right) = 572px
*/

#main {
    width: 572px;
}


#window-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #ffffff;
    border: solid 1px #b8b8b8;
    width: 510px;
    height: 350px;
    margin: 0 0 8px 0;
    overflow: scroll; /*This line causes the problem*/
    padding: 10px 30px;
    list-style-type: none;


}

.window {
    margin: 0 18px 18px 0;


}

.window:nth-child(3n) {

    margin-right: 0;

}

.window-thumbnail {

    margin: 0 -6px 8px 0;
    height: 158px;
    width: 158px;
    border-radius: 8px;
    cursor: pointer;
    background-color: #e0e0e0;
}

Here is a working example: http://codepen.io/jsanatar/pen/xOyLWK

Answer 4

Here, http://codepen.io/bhshawon/pen/OXBjOg

Using negative value for margin-right of every 3rd child

.window:nth-child(3n) {

    margin-right: -16px;

}