Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 21

Thread: Div with 100% height and width regardless of content

  1. #11
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    You could use a mix of css and js:
    Code:
    <!doctype html>
    <html >
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>&nbsp;</title>
    
    
    <body style="overflow-x: hidden; font-family: verdana; font-size: 14px">
    
    <div id="picture" style="position: absolute; left: 0; top: 0; background: url(http://www.lempens-design.com/IMG/jpg/france-main-picture.jpg) center no-repeat ; background-size: cover; z-index: -1; "></div>
    
    
    
    <div style="position: absolute; left: 0; top: 50%; width: 100%; text-align: center; ">
    <span style="position: relative; background: transparent; color: white; padding: 10px; margin: auto; font-family: lucida handwriting; font-size: 50px">B I E N V E N U E</span>
    </div>
    
    
    <div style="position: absolute; top: 100%; width: 95%; text-align: center; ">
    <h1>De Paris à Luxembourg</h1>
    Né à Paris le 14 février 1977, cela fait maintenant <b>plus de 10</b> ans que je vis de ma passion, le webdesign.<br>
    FrickenTrevor, I wouldn't trust this person if I were you.<br>
    Right on the first page he makes a rather stupid spelling mistake: je <b>vie</b> de ma passion should be je <b>vis</b> de ma passion.<br>
    Doesn't look very professionnel.
    </div>
    
    
    
    <script>
    function resize_it()
    {
    document.getElementById('picture').style.width=window.innerWidth+'px';
    document.getElementById('picture').style.height=window.innerHeight+'px';
    
    }
    //resize_it();
    window.onload=onresize=resize_it;
    </script>
    
    </body>
    
    </html>

  2. #12
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    I am absolutely astounded that anyone would put a 11.5MB web page online!!!
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #13
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    156
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default

    Quote Originally Posted by molendijk View Post
    You could use a mix of css and js [...]
    How can the aspect ratio be kept with your JS? The height stays the same when the page is resized however the width of the image is not kept. I tried this, but it didnt keep the aspect ratio

    Code:
    jQuery.fn.resizeHeightMaintainRatio = function(newHeight){
        var aspectRatio = $(this).data('aspectRatio');
        if (aspectRatio == undefined) {
            aspectRatio = $(this).width() / $(this).height();
            $(this).data('aspectRatio', aspectRatio);
        }
        $(this).height(newHeight); 
        $(this).width(parseInt(newHeight * aspectRatio));
    }
    An inline div is a freak of the web and should be beaten until it becomes a span

  4. #14
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    That's strange. It's OK on my machine. The only thing is that a small portion of the image becomes invisible when the window gets very small.
    Did you take a look at Beverleyh's 3 Ways to Resize/Scale Web Images in Responsive Design?

  5. #15
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    156
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default

    Quote Originally Posted by molendijk View Post
    a small portion of the image becomes invisible when the window gets very small.
    Thats what I was talking about
    An inline div is a freak of the web and should be beaten until it becomes a span

  6. #16
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    No, you were talking about the ratio of the width of the image to its height (which is something quite different). That's no problem in my code. I'll try to correct the issue of the image being cut off in small windows as soon as I've got some time. But have you looked at Beverleyh's code?

  7. #17
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    156
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default

    Yeah I have, it seems like a script would be easier than using calculations. Its a great post though and very helpful
    An inline div is a freak of the web and should be beaten until it becomes a span

  8. #18
    Join Date
    Aug 2009
    Location
    charset utf-8
    Posts
    156
    Thanks
    4
    Thanked 5 Times in 5 Posts

    Default

    Quote Originally Posted by molendijk View Post
    I'll try to correct the issue of the image being cut off in small windows as soon as I've got some time
    Any luck with trying to correct it?
    An inline div is a freak of the web and should be beaten until it becomes a span

  9. #19
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

  10. #20
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Frickentrevor, I don't think what you want is possible. If we want to maintain the width-height ratio, there will always be some part of the image being cut off in smaller windows.
    And that's precisely what also happens in the site you mentioned.

Similar Threads

  1. width and height
    By EXCUSE in forum HTML
    Replies: 1
    Last Post: 11-17-2008, 04:29 PM
  2. Table width and height in IE and FF
    By chas in forum HTML
    Replies: 4
    Last Post: 07-24-2008, 12:35 PM
  3. Percentage Height and Width
    By hurry in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 01-28-2008, 05:25 AM
  4. inline css height/width
    By neilkw in forum CSS
    Replies: 0
    Last Post: 07-04-2006, 12:15 PM
  5. specifying Height and width for inline div
    By wishiwasageek in forum CSS
    Replies: 1
    Last Post: 08-31-2005, 01:45 PM

Bookmarks

Posting Permissions

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