CODEWITHSUNDEEP
htmlcssoverflowmultiple-columns
streetlight
streetlight

Reputation: 5968

CSS Column Height Scrolling

I'm having an issue with creating overflows inside of a relatively-sized vertical div.

Here is a fiddle: http://jsfiddle.net/ZgL59/

Basically, I have one large vertical column, with two percentage-based divs inside of it. The bottom div has content in there that is larger than the div, with overflow-y:scroll on it.

However, as you can see in the fiddle the bottom amount of content gets cut off depending on the browser (the last 'Y' in the fiddle is not entirely visible). This is browser dependent. Is there a fix for this? I don't want to fall down the rabbit hole of trying to please every browser with a different height.

Here is the HTML:

 <div class="container">
     <div class="inner1">X</div>
     <div class="inner2">
         Tons of Content...
     </div>
 </div>

And the CSS:

 html, body {
    height:100%;
    overflow:hidden;
 }

 .container {
    height:100%;
    background:blue;
 }

 .inner1 {
    height:30%;
    background:red;
 }

 .inner2 {
    height:70%;
    background:green;
    overflow-y: scroll;
 }

Upvotes: 0

Views: 230

Answers (1)

SW4
SW4

Reputation: 71150

If I'm right in thinking what you mean by 'cut off', see this fiddle, setting the marginand padding to 0px on the body should fix it. Tested in Chrome, FF and IE10 and looks OK (again, if I understand the question).

Upvotes: 1

Related Questions