Welcome to WebmasterWorld Guest from 23.20.77.100

Forum Moderators: not2easy

Message Too Old, No Replies

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

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

New User

joined:Sept 18, 2013
posts:30
votes: 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)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


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)

New User

joined:Sept 18, 2013
posts:30
votes: 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)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13210
votes: 347


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)

New User

joined:Sept 18, 2013
posts:30
votes: 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.