Forum Moderators: not2easy

Message Too Old, No Replies

How to make div certain distance from bottom of browser on page load?

         

TheIceman5

5:20 am on Jan 2, 2014 (gmt 0)

10+ Year Member



I am building a website with a fixed header and footer, the main content section is scrollable.
but what I want to happen is when the site loads I want to make the scrollable content div's top to start at 300px from bottom of the browser window.
I need some way of calculating the browser height and adjusting the initial position of this content div 300px less and place it there on load.
anyone know how to do this?

Fotiman

4:35 pm on Jan 2, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Something like this:


<div id="header">header</div>
<div id="container">
<div id="content">
Content<br>Content<br>Content<br>Content<br>Content<br>
Content<br>Content<br>Content<br>Content<br>Content<br>
Content<br>Content<br>Content<br>Content<br>Content<br>
Content<br>Content<br>Content<br>Content<br>Content<br>
Content<br>Content<br>Content<br>Content<br>Content<br>
Content<br>Content<br>Content<br>Content<br>Content<br>
</div>
</div>
<div id="footer">Footer</div>


#container {
position:fixed;
bottom: 0px;
height: 0px;
width: 100%;
overflow: visible;
}

#content {
background-color: red;
position: relative;
top: -300px;
width: 100%;
height: 200px; /* leave room for footer */
overflow: auto;
}

#footer {
background-color: green;
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
}

TheIceman5

9:47 pm on Jan 2, 2014 (gmt 0)

10+ Year Member



ok that does it, but I also should have mentioned I would like the header to be around 200px and the content to be able to scroll up to and beyond the header afterwards.

lucy24

10:46 pm on Jan 2, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



when the site loads
<snip>
place it there on load

You said "on load" twice so I assume it's important. You're saying that you want the material's initial position to be such-and-such, but it might move later, right? If so, I'm not sure how it would be done without scripting.

TheIceman5

1:46 am on Jan 3, 2014 (gmt 0)

10+ Year Member



I want the page content to start down near the bottom as I want to display the background picture and when people see the content below they can scroll it up into view.
I would post a link to an example but im not allowed to post websites here.