Div 100% width and a margin

问题:

I'm trying to put a left and right margin on something that is also 100% width. I was using the box-sizing method which I was hoping would make it say 100% including the margin but it does 100% PLUS the margin, meaning I have a vertical scroll bar.

It's demonstrated here:

http://jsbin.com/xomocitono/1

  <div id="main">     Test   </div>  #main {width: 100%; margin-left: 100px; margin-right: 100px; background: red;} 

In my own particular situation I can't use the following:

1. Padding instead, because even though it works how I want (in terms of 100% width) the padding covers the links below whereas the margin doesn't.

2. CSS Calc (it isn't as cross browser as I was hoping)

3. Fixed width #main, because I want it to be fluid, just with a margin either side.

Do I have any other options?

回答1:

You don't have to give width when you are using margin-left and margin-right.

Try This:

#main {  margin-left: 10%;  margin-right: 10%;  background: red; } 

文章来源: Div 100% width and a margin