Grow your CSS skills. Land your dream job.

Auto sizing content area

  • # September 6, 2011 at 12:19 am

    I’m new to HTML5 and CSS3. I’ve been playing with it on my local server and I’m trying to figure something out. I have a fixed header with a height of 150px and a fixed footer with 30px height. I’ve applied an opacity to both items to where the static background image will show through a little.

    I have a section area that has a 90% opacity and rounded corners. I was wondering if there was a way to make the content area fill the remaining are between the header and footer and allow the user to scroll through the content. I’m trying to accomplish what can be done on a flash site without the flash. I know the flash site has a set content height but I would rather it be dynamic since not everyone has the same size monitor. Here is a reference website that shows what I would like my content area to do. I would like the scroll bar to show up on the side like normal and not inside the content area.

    # September 6, 2011 at 12:53 am

    Like this? http://jsfiddle.net/sl1dr/WxUCA/2/

    I have something similar on my portfolio: http://joshuanhibbert.com

    # September 6, 2011 at 1:08 am

    @Joshuanhibbert – This is what I was talking more on the lines of http://jsfiddle.net/ZrtPH/3/

    # September 6, 2011 at 1:35 am

    I understood that part, wasn’t sure how you wanted the scrollbar though. More like the fiddle I linked, or my portfolio?

    # September 6, 2011 at 1:44 am

    I like how your portfolio is. I just didnt know if it was possible to do with the

    with rounded corners.
    # September 6, 2011 at 1:46 am

    Something like this? http://jsfiddle.net/sl1dr/ZrtPH/4/

    # September 6, 2011 at 1:18 pm

    That’s what I currently have it doing. The only part I didn’t like was the fact that I could see the page coming up through the footer. That’s the only reason that I wanted the

    to be a set size based off of the remaining are after the header and footer. It appears it’s not possible, which is no big deal, I will just modify the site to work a little different for me.
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".