www.webdeveloper.com
Results 1 to 13 of 13

Thread: How to make a page container fit entire browser?

  1. #1
    Join Date
    Dec 2013
    Posts
    7

    How to make a page container fit entire browser?

    Hello,

    I'm a noob so sorry if this question is lame, but I am having trouble making my page container fit the entire browser. It fits the width, and reaches the top of browser. The container does not reach the bottom of the browser though.

    (I've tried body:height 100%, padding:0px both for page and body; bottom:0px for page)

    This is the CSS:

    Code:
    body{
    	        background: -webkit-radial-gradient(#F0F0F0,#E8E8E8);
    	        background: -moz-radial-gradient(#F0F0F0,#E8E8E8);
    	        background: -ms-radial-gradient(#F0F0F0,#E8E8E8);
    	        background: -o-radial-gradient(#F0F0F0,#E8E8E8);
                    margin: 0 auto;
    	        font-family: myriad pro, sans-serif;
    	        font-size:18px;
                    }
    
          .page{
                  min-height: 100%; 
                  height:100%; <!-- if IE -->
                  width: 100%;
                  min-width:100%;
                  background: #515673;
                  }

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there corelur,

    and a warm welcome to these forums.

    Does this basic example help...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    html,body {
        height:100%;
        margin:0;
     }
    #container {
        height:100%;
        background-color:#515673;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container"></div>
    
    </body>
    </html>

    coothead

  3. #3
    Join Date
    Dec 2013
    Posts
    7
    Thank you coothead for the welcome, and for the help. Unfortunately, that didn't work. I've tried lots of things, and I have no idea why they don't work.

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459

    What did not work.

    The #container div fills the entire browser.

    coothead

  5. #5
    Join Date
    Dec 2013
    Posts
    7
    oh I'm sorry. I ried the code you recommended, and it container still doesn't cover entire browser. I don't know what I'm doing wrong

  6. #6
    Join Date
    Aug 2013
    Posts
    56
    I think he means without browser navbars, like the F11 button, and some applications.

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there corelur,

    the code that I gave you has been tested in.....

    IE11, Firefox 26.0, Chrome 31.0, Safari 5.1.7, and Opera 12.6 and 18.0.

    The previous poster mentioned the F11 function and it works with that option also.

    coothead

  8. #8
    Join Date
    Dec 2013
    Posts
    7
    oh. lol. I think this is getting way too complex for my abilities now

  9. #9
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there corelur,

    post your code that does not work, so that I may compare it with mine which does.

    Perhaps, we can then resolve your dilemma.

    coothead

  10. #10
    Join Date
    Dec 2013
    Posts
    7

    Red face Thank you!

    Thank you!!


    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
        <title>Welcome </title>
        <link rel="stylesheet" type="text/css" href="css/style_2.css"/>
        <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css"/>
        <link rel="stylesheet" type="text/css" media= "only screen and (min-width:501px) and (max-width:800px)" href="css/screen_layout_medium.css"/>
        <link rel="stylesheet" type="text/css" media= "only screen and (min-width:50px) and (max-width:500px)" href="css/screen_layout_small.css"/>
        <!--[if lte IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    
    </head>
    
    <body>
      
        <div class="page"
            <header>  
    
              <div class="header"><!--might change after lynda tut --> 
           
               <img id= "sold" src="images/sold.png" alt="Sold">
         
              </div>	
         
            </header>
            
            <article><!--might change after lynda tut-->   
    
              <div class="mainText"><!--might change after lynda tut -->
          
                <h1> Main heading</h1>
    
                <h3> Sub heading</h3> 
    
                  <ul><li> Point 1</li> 
                      <br />
                      <li> Point 2</li>
                      <br />
    	                <li> Point 3</li> 
                  </ul>
    
                <p>Attention getter</p>
               
              </div>
    
          
        
               <div id="form">
     
                    <img src="images/egg_head_2.png" id="egghead" alt="Person" />
                    <img src="images/house-transparent.png" id="colorhouse" alt="House" />
                    <img src="images/get_started.png" id="getstarted" alt="Get Started Now" />
                  
                  
                  <form id="myform" name="theform" class="group" method="POST">
        
    	         <span id="firstname"> <label for="myname">Name (Last, First):</label> </span> 
                    <span id="firstnamefield"><input type="text" name="myname" id-"myname" size="50" </span>
                    
    	           
        
    
                    <span id="mail"> <label for="email">Email:</label> </span> 
                    <span id="emailfield"><input type="text" name="email" id="email" </span>
                    
    	
    
                    <span id="telephone"> <label for="phone">Phone:</label> </span>
                    <span id="phonefield"><input type="text" name="phone" id="phone" </span>
        
    	
    	        <span id="sub"><input type="image" name="action" value="submit" src="images/submit.png" alt="Submit" /></span>
    
                  </form>	
    	
                </div>
          
            </article>
    
               
            <div class="footer_container">
               
                <div class="footer one"><!--Was the main footer div before the responsive design(same as promo in lynda tut)--> 
                  
                  <div class="content">
                   
                    <img id= "house" src="images/small_house.png" alt="House">
               
                    
    	              
                    <p>  small point1<br/> 
                         small point1  </p>
                  
                  </div>
                
                </div>
        
                
                <div class="footer two">   
                  
                  <div class="content"
                   
                    <img src="images/letter.jpg" alt="Marketing">
                    
    	              
    	       
                    <p> small point 2 <br/>
                    small point2</p>
               
                  </div>
    	          
                </div>
                
                
                <div class="footer three">    
                  
                  <div class="content">  
                    
                    <img id= "dollar" src="images/money_sign.png" alt="Dollar Sign">
        
                    
                    <p> small point 3 <br/>
                    small point 3</p> 
    	            
                  </div>
                
                </div>
               
               
            </div>
        </div>
        
      
    
    </body>
    </html>
    Code:
    body{
    	background: -webkit-radial-gradient(#F0F0F0,#E8E8E8);
    	background: -moz-radial-gradient(#F0F0F0,#E8E8E8);
    	background: -ms-radial-gradient(#F0F0F0,#E8E8E8);
    	background: -o-radial-gradient(#F0F0F0,#E8E8E8);
        margin: 0;
    	font-family: myriad pro, sans-serif;
    	font-size:14px;
    	min-height:100%;
    	
    
    	
    }
    
     .page{
            min-height: 100%; 
            height:100%; <!-- if IE -->
            width: 100%;
            min-width:100%;
            background: #515673;
            }

  11. #11
    Join Date
    Dec 2013
    Posts
    7
    The code I have below is the code before I tried your suggestion. For some reason that code didn't work either though

  12. #12
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there corelur,


    you haven't used any of the code that I gave you.

    So I have added the appropriate CSS to your document...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
    <title>Welcome </title>
    <link rel="stylesheet" href="css/style_2.css"/>
    <link rel="stylesheet" href="css/screen_layout_large.css"/>
    <link rel="stylesheet" media= "only screen and (min-width:501px) and (max-width:800px)" href="css/screen_layout_medium.css"/>
    <link rel="stylesheet" media= "only screen and (min-width:50px) and (max-width:500px)" href="css/screen_layout_small.css"/>
    <!--[if lte IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
    html,body {
        height:100%;
        margin:0;
        background: -webkit-radial-gradient(#F0F0F0,#E8E8E8);
        background: -moz-radial-gradient(#F0F0F0,#E8E8E8);
        background: -ms-radial-gradient(#F0F0F0,#E8E8E8);
        background: -o-radial-gradient(#F0F0F0,#E8E8E8);
        font-family: myriad pro, sans-serif;
        font-size:14px;
     }
    .page {
        height:100%;
        background:#515673;
     }
    </style>
    </head>
    
    <body>
      
    <div class="page">
    <header>  
    <div class="header"><!--might change after lynda tut --> 
    <img id="sold" src="images/sold.png" alt="Sold">
    </div>	
    </header>
            
    <article><!--might change after lynda tut-->   
    <div class="mainText"><!--might change after lynda tut -->
    <h1> Main heading</h1>
    <h3> Sub heading</h3> 
    <ul>
    <li>Point 1</li> 
    <li>Point 2</li>
    <li>Point 3</li> 
    </ul>
    <p>Attention getter</p>
    </div>
    <div id="form">
    <img src="images/egg_head_2.png" id="egghead" alt="Person" />
    <img src="images/house-transparent.png" id="colorhouse" alt="House" />
    <img src="images/get_started.png" id="getstarted" alt="Get Started Now" />
    
    <form id="myform" name="theform" class="group" method="POST">
    <span id="firstname"> <label for="myname">Name (Last, First):</label> </span> 
    <span id="firstnamefield"><input type="text" name="myname" id="myname" size="50"> </span>
    <span id="mail"> <label for="email">Email:</label> </span> 
    <span id="emailfield"><input type="text" name="email" id="email"> </span>
    <span id="telephone"> <label for="phone">Phone:</label> </span>
    <span id="phonefield"><input type="text" name="phone" id="phone"> </span>
    <span id="sub"><input type="image" name="action" src="images/submit.png" alt="Submit" /></span>
    </form>	
    </div>
    </article>
    <div class="footer_container">
    <div class="footer one"><!--Was the main footer div before the responsive design(same as promo in lynda tut)--> 
    <div class="content">
    <img id= "house" src="images/small_house.png" alt="House">
    <p>small point1<br/>small point1</p>
    </div>
    </div>
    <div class="footer two">   
    <div class="content">
    <img src="images/letter.jpg" alt="Marketing">
    <p> small point 2 <br/>small point2</p>
    </div>
    </div>
    <div class="footer three">    
    <div class="content">  
    <img id= "dollar" src="images/money_sign.png" alt="Dollar Sign">
    <p> small point 3 <br/>small point 3</p> 
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    coothead

  13. #13
    Join Date
    Dec 2013
    Posts
    7
    Hey coothead,

    the code definitely works if I put it in the html page, but if I paste the code in a linked CSS page it doesn't work. (or am I supposed to keep it in the html page?? If so, can i still have separate CSS pages??)

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