www.webdeveloper.com
Results 1 to 3 of 3

Thread: 100% height image with margins

  1. #1
    Join Date
    Jul 2010
    Posts
    4

    100% height image with margins

    Hello,

    I ran into a problem trying to create an image that should take up the center of the viewport (dynamic height). I tried to implement this using an image with 100% height and a container with some padding (to exclude a header and footer with a fixed height). An approach like this usually works fine on horizontal liquid layouts, but I can't get it to work vertically. Does anyone know of a way to achieve this with just css?

    Thanks in advance!

  2. #2
    Join Date
    Sep 2010
    Location
    UK
    Posts
    30
    can you please share the code. then this is very helpful for us.

  3. #3
    Join Date
    Jul 2010
    Posts
    4
    Well, for example:

    html:

    HTML Code:
    <html>
      <body>
        <div id="header"></div>
        <div id="imagecontainer">
          <img src="images/myImage.png"></img>
        </div>
        <div id="footer"></div>
      </body>
    </html>
    css:

    Code:
    html, body {
      height: 100&#37;;
    }
    
    #imagecontainer {
      height: 100%;
      text-align: center;
    }
    
    img {
      height: 100%;
      width: auto;
    }
    
    #header {
      position: absolute;
      top: 0px;
      width: 100%
      height: 20px;
    }
    
    #footer {
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 20px;
    }
    This will stretch the image across the entire height, which is not what I want. I would really like it to leave some space on the top and bottom for my header and footer (while still stretching to fit the available space in the center). Any ideas?
    Last edited by Codecaster; 12-14-2010 at 06:15 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles