CODEWITHSUNDEEP
htmlcss
Vivek Vikranth
Vivek Vikranth

Reputation: 3505

100% height for body and its child elements

I am specifying a background color for the body which displays up to a certain distance only. I need it to be full height and for its child elements too. One of its child elements has border-right which also needs to show over the full screen height.

My CSS looks like(sample one) better check my demo

demo page

   html,body {
         height: 100%; 
         background-color: #fefefe;
    }
    .cover {
         height: 100%;
    }
    .left_side {
        float: left; 
        height: 100%;
        border-left: 1px solid #ccc;
        width: 31%;  
    }

and html is

     <body>
         <div class="cover">
            <div class="left_side">
            </div>
         </div>
      </body>

and the bgcolor and childs border seems up-to some limited distance only like enter image description here what is that problem guys i need that background and border as 100% height.

Upvotes: 0

Views: 560

Answers (2)

lukeocom
lukeocom

Reputation: 3243

Remove height:100% from your body and html style.

Instead of having a border set to the left container, try setting the border on the content container instead.

your css would be something like:

.large-9 .columns .right_side{border-left:1px solid #333;}

the left column is currently set to 100% and renders correctly. the problem is that it doesnt take into account the overflow content you cannot see, until you scroll. The other solution would be to absolute or fixed position the left container, and set its top and bottom values to 0.

css for that would be something like:

.left_side .full_height{position:fixed;top:0;bottom:0;width:200px;}

Here's a really basic layout with a fixed left column - http://jsfiddle.net/WAJtk/

and a version with a fixed header too - http://jsfiddle.net/WAJtk/1/

you might also like this pen - http://codepen.io/lukeocom/pen/KqAfG

Upvotes: 1

Tdelang
Tdelang

Reputation: 1308

You could use absolute position and setting top and bottom:

body {
     position: absolute;
     top: 0;
     bottom: 0;
}

Upvotes: 0

Related Questions