Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2014
    Posts
    23
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Can't get proper stretching of a DIV to browser window

    Hi all,

    I'm wanting to create a DIV that stretches 100%. I've done so, however, at the bottom of the DIV it is overflowing and making the scroll bar grow.

    Does anyone know how to stop this from happening so there is a kind of border at the bottom like there is the top?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    	<HEAD>
    		<TITLE>Test</TITLE>
    		<STYLE type="text/css">
    			body, html {
    				height: 100%;
    			}
    			div.focus {
    				background-color: green;
    				height: 100%;
    				margin-left: auto;
    				margin-right: auto;
    				width: 983px
    			}
    		</STYLE>
    	</HEAD>
    	<BODY>
    		<DIV class="focus">
    		</DIV>
    	</BODY>
    </HTML>

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there Phaelon,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>Test</title>
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
     }
    div.focus {
        width:983px;
        height:100%;
        margin:auto;
        background-color:green;
        box-shadow:inset 0 0 20px #000;
     }
    </style>
    
    </head>
    <body>
    
    <div class="focus"></div>
    
    </body>
    </html>
    coothead
    Last edited by coothead; 01-04-2014 at 11:44 AM.


  •  

    Posting Permissions

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