How to get a background-color on a div with columns?

Question

Is there a specificity about div with columns ? It seems like I can't get a background-color with width:100% on it.

HTML

<body>
<div id="main">
   <div id="content">
      <div id="article"><!-- <p>text</p> --></div>
   </div>
</div>
</body>

CSS

body { margin:0; padding:0; color:white; background:transparent; }
#main { position:absolute; height:100%; top:0; left:0; }
#content { position:relative; overflow-x: scroll; overflow-y: auto; height: 100%; top:0; left:0; background:black; }
#article { border:10px solid yellow; float:left; width:100%; height:100%; position: relative; box-sizing: border-box; font-size:25px; text-align:left; -webkit-column-width: 300px; -webkit-column-gap: 40px; -moz-column-width: 300px; -moz-column-gap: 40px; column-width: 300px; column-gap: 40px; background:green; }

Here is the JSFiddle demo : http://jsfiddle.net/kz5ch49w/53/

A part of the div is outside the yellow border. How to resolve this ?

Answer 1

只需从main和content div中删除position:absolute和position:relative解决问题

How to get a background-color on a div with columns?

Question

1 answers

solution1
0 2015-01-23 18:35:56

How to get a background-color on a div with columns?

Question

1 answers

solution1 0 2015-01-23 18:35:56

solution1
0 2015-01-23 18:35:56