Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10

Thread: Full-Screen DIV

  1. #1
    Junior Member
    Join Date
    Feb 2011
    Posts
    5
    Member #
    26916
    I would like to create a page in which my content is in a box that covers the full screen even if the content doesn't fill the page, but would scroll down if it does exceed the size of the screen.

    I tried the following CSS style:
    Code:
    #pageLayout
    {
        background-color: #ffffff;
        color: #000000;
        padding: 4px;
        border-style: solid;
        border-width: 1px;
        height: 100%;
    }
    I created a DIV using this style, and it does cover the whole window...unless I add a <!DOCTYPE> definition to my HTML document, which causes the height of the box box to contract to the content inside if it doesn't fill the page.

    Is there a way to make a box cover the entire height of the page even if a <!DOCTYPE> is present?

  2.  

  3. #2
    Member
    Join Date
    Jan 2011
    Location
    Edmonton, Alberta
    Posts
    82
    Member #
    26483
    Liked
    2 times
    I'm not the most proficient when it comes to javascript, but I'm wondering if you could use some script to find out the height of the browser.

    I would use this to find out the browser height and than find a way to incorporate that into your css.

    Code:
    window.innerHeight
    Check out some of my work: http://www.jr-webdesigns.com

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    It shouldn't have worked the way you had it without the doctype present.

    100% + 4px padding + 1px border = more than 100% height.

    You could also use min-height, which might work for you, but again, your padding and border will pose a problem.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Junior Member
    Join Date
    Feb 2011
    Posts
    5
    Member #
    26916
    Quote Originally Posted by TheGAME1264, post: 198630
    It shouldn't have worked the way you had it without the doctype present.
    Other way around. It only worked when the doctype was not present--I tried in both IE8 and FireFox 3.6 and got the same results.

    100% + 4px padding + 1px border = more than 100% height.
    This wasn't a problem without the doctype. It did make the box cover the whole screen without running over or activating vertical scrolling. In fact, the box still left room above and below where the margins showed in the page's background color.

    You could also use min-height, which might work for you, but again, your padding and border will pose a problem.
    Would I use min-height in addition to or in place of height? I tried using both, and it still only works if the <!DOCTYPE> is omitted. If I use only min-height, it doesn't work either way.

  6. #5
    Junior Member
    Join Date
    Feb 2011
    Posts
    5
    Member #
    26916
    Correction: Firefox did cause the page to scroll by a very little bit without the doctype, but IE did not go over. I guess I could reduce the height to about 95-97%, and it wouldn't be a big deal. I'll check that out after I solve the problem at hand.

    If it helps, I'll post the complete HTML file I created to test this (without the doctype):

    HTML Code:
    <html>
    <head>
        <style type="text/css">
        body
        {
            background-color: #0088cc;
        }
    
        #pageLayout
        {
            background-color: #ffffff;
            color: #000000;
            padding: 4px;
            border-style: solid;
            border-width: 1px;
            height: 100%;
        }
        </style>
        <title>DIV Page</title>
    </head>
    
    <body>
        <div id="pageLayout">
            <p>This is the content of my page.</p>
        </div>
    </body>
    </html>

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Again, use min-height as well as height. That way, you'll get the effect you ultimately want and you'll also allow for text to scroll past the bottom of the div.

    Although I'm confused by something...are you just trying to put a black background in the middle of your page? If so, what's the width of the page layout going to be? If it's a fixed width in pixels, you'll likely find it much easier just to create a (width of your page layout) x 1 faux background (you'll have to modify this tutorial to suit your needs, but it will work if you put the background in the CSS for your body).
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Okay, I had about 5 minutes, so I whipped up a quick-but-not-perfect demo (you should use a GIF instead of a JPG):

    http://www.adamwebdesign.ca/wdf/samplefauxbg.htm

    Not sure if that's what you're trying to achieve, but it should give you the idea. The borders are even part of the background.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Junior Member
    Join Date
    Feb 2011
    Posts
    5
    Member #
    26916
    You might have confused color and background-color on my style sheet. I want the DIV to have a white background with black text. For this example, I gave the body a blue background.

    You must have observed that I did not specify a width in my style definition. Leaving it out has been making the white box take up the entire width of the window in both browsers (minus a slight margin), regardless of the presence of a doctype. When all is said and done, I plan to specify a width at a high enough percentage that it displays a sufficient amount of text on one line but has a noticeable left/right margin.

    I try to avoid using absolute pixel dimeinsions, hence all the percentages, but Jeff's JavaScript idea sounds like it might have potential. I did, however, try specifying a height and min-height in pixels instead of percent, and it did cause the box to be the right height, even with a doctype.

  10. #9
    Junior Member
    Join Date
    Feb 2011
    Posts
    5
    Member #
    26916
    I like your example, Game. That is very close to the look I am trying to achieve. The only problem I see with it is that if I make the browser window small, it puts on a horizontal scroll-bar (which is why I don't like using pixel coordinates).

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You're pretty well going to have that problem regardless at some point, though, depending on the horizontal dimensions of things such as images (which take up a fixed width regardless of what you do) and the plane they lie on. That's the joy of web design, though...you have to make these types of hard decisions.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

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

Search tags for this page

box take up whole screen html
,
coding to make my div take the whole page
,

css background color take up the whole screen

,
css div takes up screen size
,
css how to make div take up screen
,
div till fill whole screen even if scrolled
,
empty div take full page
,
make box fill entire page css
,
make each div fullscreen
,
making a div take up the whole browser
Click on a term to search for related topics.
All times are GMT -6. The time now is 04:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com