CODEWITHSUNDEEP
csshtmlheight
user1871245
user1871245

Reputation:

How do I make a div 100% of the viewport without using fixed positioning?

How am I able to make the side bar 100% of the entire page rather than 100% of the screen if another div is larger than the screen?

I'd like to avoid using a fixed positioning on the side bar as I need this to contain large amounts of information that will require scrolling. 

body {
    height:100%;
    background:red;
}
#container {
    width:50%;
    margin:0 auto;
    height:1200px;
    background:white;
}
#left {
    position:absolute;
    float:left;
    height:100%;
    width:100px;
    background:black;
}

<body>
    <div id="left"></div>
    <div id="container"></div>
</body>

http://jsfiddle.net/jBMBR/2/

Upvotes: 0

Views: 106

Answers (2)

Raver0124
Raver0124

Reputation: 522

There's few ways of doing this, but easiest way i found was this:

css:

<style>
    html, body { height: 100%;}
    #left, .main, #wrapper { height: 100%;}
    .wrapper { display: table;position: relative;  }    
    #left { position: relative;background: yellow;width: 100px;display: table-cell;} 
    .main { position: relative;background: yellowgreen;width: 500px;display: table-cell;}
</style>

HTML:

<div class="wrapper">
    <div id="left">
        <p>left nav</p>
    </div>
    <div class="main">
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
        <p>asdfasdf</p>
    </div>
</div>

http://jsfiddle.net/jBMBR/6/

Upvotes: 0

Timidfriendly
Timidfriendly

Reputation: 3284

Does this achieve what you desire? http://jsfiddle.net/David_Knowles/qfTd5/

body{ height:100%; background:red; position:relative;}
#container{ width:50%; margin:0 auto; height:1200px; background:white;}
#left{ position:absolute; top:0; bottom:0; right:0; width:100px; background:black; overflow:scroll;}

Upvotes: 1

Related Questions