Welcome to WebmasterWorld Guest from 50.16.112.199

Forum Moderators: not2easy

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

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



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?
4:35 pm on Jan 2, 2014 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ 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%;
}
9:47 pm on Jan 2, 2014 (gmt 0)



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.
10:46 pm on Jan 2, 2014 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 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.
1:46 am on Jan 3, 2014 (gmt 0)



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.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month