homepage Welcome to WebmasterWorld Guest from 54.198.33.96
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




msg:4634491
 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?

 

Fotiman




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

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




msg:4634687
 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.

lucy24




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

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




msg:4634731
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved