homepage Welcome to WebmasterWorld Guest from 54.167.182.201
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#: 4634489 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4634489 posted 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#: 4634489 posted 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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4634489 posted 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#: 4634489 posted 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