CODEWITHSUNDEEP
javascriptjquerycsshtml
Miguel
Miguel

Reputation: 2079

properly setting the percentage height of a parent div and children divs

I'm trying to figure this out without making to much of a mess here. I have one container div then within it i have 3 more divs for wich are floated left. My problem is that my container div has a style of height of 100%. like this

.Container {
height: 100%;
min-width: 600px;
overflow-y: hidden;
 }

and the one of my child div inside the container div(sidebar1), (for the sake of clarity ill keep it to just one div) has this css.

 border: 1px solid #E0E0DF;
bottom: 10px;
box-shadow: 2px 2px 4px #888888;
float: left;
height: 100%;
overflow-y: scroll;
width: 18%;
  }

I add "list" elements to the sidedar1 div using jquery.The problem that I'm encountering is that i don't actually get the scroll bar to appear until there are like 3 or 4 items past the view and even when the scroll bar show up I can't scroll all the way down to see them. I understand it has something to so with the parent being 100% height and the child also being 100%. I cant see the bottom of the sidebar1 scroll plus i have the scroll bar hidden for container div. what is the best way to do this? i want to have container div that basically expand the full length and width of the users screen without any scroll bars and then within it i would like to have my child divs floated left but i don't want them to lose view if that makes any sense. I would like to be able to see their full scroll bar when they appear. Thanks in advance Miguel

Upvotes: 0

Views: 752

Answers (1)

Tibos
Tibos

Reputation: 27823

The problem is that your container isn't "aware" of its children, because they are floated. Use the clearfix solution on your container to contain the floats and you should properly get the scrollbar.

Take care though, as you will get the scrollbar from the first item, because the content of the container will have height 100% + 2px from the border. You can solve that by setting the box-sizing property on the floated elements to border-box.

Clearfix main idea: 

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

Some link: http://www.webtoolkit.info/css-clearfix.html

Upvotes: 1

Related Questions