CODEWITHSUNDEEP
htmlcss
Gerico
Gerico

Reputation: 5169

Make a div always 100% of the viewport

Basically i have a sidecolumn and a main column. The side column holds some navigation icons, and the main will have an iframe.

Almost 90% of the time the iframe content will be around 2000px in height. The problem is that having my sidebar absolutely positioned to the side causes the min-height: 100%; to only take into account the viewport height when you load the page.

When you scroll down the page to see all of the main content, once you hit the end of the sidebar, it just cuts off. This looks horrible, and i want to know if there is a PURE CSS solution to the problem i am getting? I could just make a background image that has the dark grey bar and repeat-y, however i just wanted to see if there is any other solutions.

The reason i don't want to use position: fixed; is that sometimes that sidebar menu height will change, meaning i might need a user to be able to use the pagescroll to see the other options.

I've made a jsfiddle to help demonstrate my point, which can be found here: http://jsfiddle.net/kKjBY/1/

My HTML

<div class="wrapper">

    <div id="main_content" class="large">
            <p>Main content</p>
        </div>

        <div id="sidebar">
            <ul class="sidebar_nav">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
</div>

My CSS

#sidebar {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  min-height: 100%;
  background: #323232;
  color: #fff;
}
#main_content{
    padding-left: 80px;    
    height: 3000px; /* stricly to demonstrate */
}
#sidebar ul{ 
    margin: 0;
    padding: 0;
}
#sidebar li {
  list-style: none;
  width: 60px;
  height: 60px;
  text-align: center;
}

Upvotes: 0

Views: 784

Answers (2)

robooneus
robooneus

Reputation: 1344

Add position:relative; to the wrapper div and bottom:0; to the sidebar.

See the updated fiddle: http://jsfiddle.net/W725c/1/

Upvotes: 3

abhinsit
abhinsit

Reputation: 3272

The div needs to be

top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;

It will then stay within the viewport's dimensions and "travel" with the scrollbar.

I`enter code here it will only cover the entire viewport if is styled to

margin: 0; padding: 0;

Upvotes: 0

Related Questions