css browser pixel rounding / overflow hidden with percentages

问题

I am trying to make a scalable grid layout with CSS and I ve came across 2 problems that drive me nuts, so any help is greatly appreciated

1) I have a div with width set to 100% (with overflow hidden) so it covers the full browser window and inside the div I am trying to place ,say 5, divs one next to the other with width 20% but the last one that i want it to be slightly wider (21%). Although i have overflow hidden on the parent container the last div is wrapped below the other four instead of remaining on the same line. I understand that this happens because the aggregate width of the child divs is more than the parent div, but wouldn't this be prevented by using overflow hidden?

2) The second problem i have is related to the 1st. I have the last div e.g. 21%, because if i leave it to 20% in order to fit the container, on window resize a small gap appears at the right end of the page. This happens on webkit browsers only due to the way they treat pixel rounding.

I am trying to find a way to resolve this with no luck so far. What I want to achieve is to have multiple divs one next to the other that cover the full browser width and continue to do so even on resize.

I have found a way around it by using javascript to resize the last div when the resize ends but there must be a more correct way of doing it, or only with CSS?

回答1:

I think using margin-right:-1px; might be the best solution to the problem that basically makes the image's layout width 20% but its visible width is still 21%.

HTML

<div id="grid">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>
</div>

CSS

#grid {width:100%;height:100px;}
#grid > div {width:20%;height:100px;float:left;}
#grid > div:last-child {width:21%;margin-right:-1%;}
.a {background-color:#F00;}
.b {background-color:#F33;}
.c {background-color:#F66;}
.d {background-color:#F99;}
.e {background-color:#FBB;}

http://jsfiddle.net/ER7ML/1/

As for the reason overflow:hidden; doesn't work, it doesn't interrupt how the page is laid out. You could use the following solution which says to hide the overflow on an inner div which has width:101%. I don't think this one is anywhere near as nice as the previous solution however.

HTML

<div id="outer">
  <div id="grid">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
  </div>
</div>

CSS

#outer {width:100%;height:100px;}
#grid {width:101%;}
#grid > div {width:20%;height:100px;float:left;}
#grid > div:last-child {width:21%;}
.a {background-color:#F00;}
.b {background-color:#F33;}
.c {background-color:#F66;}
.d {background-color:#F99;}
.e {background-color:#FBB;}

http://jsfiddle.net/yUPh7/1/

回答2:

Giving the last element the following properties will make it occupy the full remaining width of the container:

#grid > *:last-child {
    float:    none;
    overflow: hidden;
    width:    auto;
}

This is a simplified version of the OOCSS grids framework. A full test case and links available at the demo below:

http://codepen.io/barneycarroll/pen/cAykE

回答3:

You could try something like this.

CSS

body, html, div {
    margin:0px;
    padding:0px;
}

.main {
    width:100%;
    height:100px;
    background-color:#000000;
    position:relative;
    overflow:hidden;
}

.col1, .col2, .col3, .col4, .col5 {
    position:absolute;
    top:0px;
    width:20%;
}

.col1 {
    left:0px;
    background-color:#ff0000;
}

.col2 {
    left:20%;
    background-color:#ffcc00;
}

.col3 {
    left:40%;
    background-color:#00ff00;
}

.col4 {
    left:60%;
    background-color:#0000ff;
}

.col5 {
    left:80%;
    width:21%;
    background-color:#cc00ff;
}

HTML

<div class="main">
    <div class="col1">div 1</div>
    <div class="col2">div 2</div>
    <div class="col3">div 3</div>
    <div class="col4">div 4</div>
    <div class="col5">div 5</div>
</div>

来源：https://stackoverflow.com/questions/9914209/css-browser-pixel-rounding-overflow-hidden-with-percentages

标签

css

fullscreen

pixel

rounding