Width: 100% Without Scrollbars

问题

I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0;
    -webkit-user-select: text;
}

回答1:

Because you're using position: absolute, instead of using:

width: 100%; margin-right: 10px; margin-left: 10px

you should use:

left: 10px; right: 10px

That will make your element take the full width available, with 10px space on the left and right.

回答2:

You have to remove the margins on the #news item

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-right: 10px;  /*REMOVE THIS*/
    margin-left: 10px;   /*REMOVE THIS*/
    padding: 0;
    -webkit-user-select: text;
}

If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 0 !important; 
    padding: 0 !important;
    -webkit-user-select: text;
}

回答3:

It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.

Try googling for "css flexible ( two/three-collumn) layouts".

Here's an example,

<div id="cont">
   <div id="menu"></div>
   <div id="main"></div>
   <div class="clear"></div>
</div>

and the css

#menu{
  float:left;
  height:100%;
  width:200px;
}
#main{
  padding-left:200px;
}
.clear{clear:both;}

The #menu div, will be aligned to the left and have a static width of 200px. The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.

We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.

回答4:

I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:

box-sizing=border-box

Otherwise I always had a little content and padding pushing past the scroll bar.

回答5:

The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.

If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.

来源：https://stackoverflow.com/questions/6317215/width-100-without-scrollbars

标签

css

layout

width

overflow