• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 263
  • Last Modified:

Setting the height of a container and position of a footer

Hi,

I am a bit new to CSS layout and I am having a little difficulty with two things (see attached file).

1) I need the height of the main container to always stretch down the full height of the screen (irrespective of the amount of content included).

2)  I need the footer to be fixed at the base of the screen (again, irrespective of the content).


I'd really appreciate some help on this as I am going round in circles.

Thank you.
Website.txt
0
Andy Brown
Asked:
Andy Brown
  • 4
  • 3
2 Solutions
 
Andy BrownDeveloperAuthor Commented:
Thanks for your quick response (very much appreciated).

I'm not quite sure what that link is telling me (i'm pretty new to CSS)?
0
 
user_nCommented:
position:absolute;-says that the element wont move from it's position
left:0px; - it would be on 0pixels from left of the browser window
top:0px; - it would be on 0 pixels from top of the browser window
z-index:-1; puts the image behind the text
Here the css is described:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Andy BrownDeveloperAuthor Commented:
Still struggling I'm affraid.  Is there any chance that you could take a look at the text file and give me a pointer (sorry to be a pain).

Thanks (again).
0
 
user_nCommented:
you can try  absolute position and height 90% for the main container. and absolut position for the footer and 10% height and see whether it is what you want to achive
0
 
Andy BrownDeveloperAuthor Commented:
Thank you - I'll give it a go.
0
 
COBOLdinosaurCommented:
Why do you want the dic to stretch to the bottom of the viewport if there is nothing in it?  If there is nothing for the user to see it will just look broken.  Not that it matters, using height height 100% will break and screw up the rendering in some browser anyway.

As for the footer.  position absolute will not do what you want, it will position to the document not the screen.  for a footer at the bottom of the screen use:

footer {position:fixed; bottom 0px;}


Cd&
0
 
Andy BrownDeveloperAuthor Commented:
Thanks guys, your suggestions pointed me in the right direction.

All the best

Andy
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now