CODEWITHSUNDEEP
cssheightoverflow
Twisterz
Twisterz

Reputation: 424

CSS overflow auto and height 100%

Hi guys I realize this question has been asked before, but my situation is different. I have a content div (within body which is height 100%) that currently has overflow: auto;

The realize I have that div set to overflow is due to using floats within the content div. The sidebar I am using is a float and is set to overflow: auto and height: 100%. However, the height 100% is all that works, and it does not adjust to the content div getting larger. Does anyone have ideas?

Example is below:

<body style="height:100%">
   <div id="content" style="overflow:auto;">
      <div id="sidebar" style="float: right; overflow: auto; height: 100%;">
      </div>
   <div>
</body>

I cannot set * { height: 100%; } due to the way my nav bar works.

Upvotes: 0

Views: 463

Answers (1)

Vivek Vikranth
Vivek Vikranth

Reputation: 3505

Hey hi giving height:100%; and over:auto doesn't make any change here is a easy way for full-height to the contents by using display:table and display:table-cell (by understanding your need)

#content {
    width : 100%;
    display : table;
     margin : 0 auto;
     height : 100%;
}
#side_bar, #main{
        background : white;
        display : table-cell;    
        border : 2px dotted dodgerBlue;
        border-radius : 10px;
}

#side_bar {
   width : 27.5%;
     color:#fff;
      background: linear-gradient(#444, #111);
}
#main {
       width : 65%;
}

check my fiddle hope this will help you.

Upvotes: 1

Related Questions