473,324 Members | 2,400 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Stretch div to bottom of page if contents don't fill it

HaLo2FrEeEk
404 256MB
I'm designing a layout for a project and I'm a little rusty on HTML and CSS. I have a div that is centered in the page using margin: auto, it also has a margin-top of 15 and uses CSS3's box-shadow and a border-radius set to 10px. What I want is for the bottom of the div to be locked to the bottom of the screen, unless the content within it exceeds the height of the screen in which case it would fit to the contents.

I've tried margin-bottom, bottom, even height: 100%. Margin-bottom and bottom didn't do anything, height did make the div the height of the page, but since it has a 15px top margin, it caused it to go beyond the bottom of the page. I don't want that to happen if the content isn't as tall as the page.

Is there a way to do this? Am I making any sense?
Mar 21 '11 #1
1 22476
Was looking for the same problem and found your post, had it still open when i fixed my problem.
I needed a 130px free space at the top and fill/strech the div beneath to browsersize/content.

Got it actually working

CSS---------------

body,html{
height:100%;}
#outerbox{
width:100%;
position:absolute; /* to place it somewhere on the screen */
top:130px;
bottom:0px;} /* makes it lock to the bottom */
#innerbox{
width:100%;
position:absolute;
min-height:100%; !important
height:auto;}


HTML--------------
<div id="outerbox">
<div id="innerbox"></div>
</div>

GL
Mar 30 '11 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Jarkko Kähkönen | last post by:
Hi! I have Windows XP&IE6.0.2... (SP1). I'm coding one project with PHP. I get "Warning: Page has Expired" when I try to get back to the "POSTed page" (page whither moved from FORM-page). ...
1
by: Arun Nair | last post by:
Hi, I have the following jsp page. I am able to view only a part of it(until the occurence of the first City text box). If i remove the first few fields from the page, I am able to see a few...
4
by: Barry Margolin | last post by:
Can I do the following with Javascript? My state has a web site that can be used for online filing for unemployment benefits. Every week I have to go to the site and fill in a form, checking...
11
by: Alec S. | last post by:
Hi, Is it possible to create a colored box like this? : <html> <head> <style type="text/css"> #bbb { background: #f00; position: absolute;
5
by: Q. John Chen | last post by:
I redirect my user to the UPS tracking page. That's simple. What I want to do are: 1. I have my user's tracking number and I want to automatically enter the tracking number for the user. (At...
3
by: | last post by:
I want a banner to appear at the bottom of each page of a web app. I created a user control that describes the banner and have it placed in all my pages. For the most part it functions as needed....
13
by: Greg | last post by:
Most suggestions on this topic recommend to use a page footer and make it visible only on the last page. My problem is that the footer is half of the height of a page which means the detail would...
3
by: MrNobody | last post by:
I want to have a window where there is a strip on the bottom which stays fixed height but can stretch left and right, and always anchored to bottom border. Almost like status bar but it's going to...
2
by: tshad | last post by:
In my VS 2003 Windows Forms page, when I initially fill my ComboBox (SystemList), it goes to the SelectedIndexChanged event which calls the Loademails() function. I then call it again in the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.