2 Replies - 702 Views - Last Post: 04 September 2013 - 01:14 PM

#1 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Epic Failing at auto filling screen with div size

Posted 03 September 2013 - 08:25 PM

What I am attempting to do is have div1 be my header which stays above everything else. Ideally this would be an overlap of content.

Next. Second div fills the full height of the user's browser window even behind the header. I will use line breaks to push content down.

I have tried putting the margin and border of html, body, div to 0. no result

I have tried using a table. This just results in my inability to place a picture as the background for the 2nd div

Through my reading it sounds like javascript is the only surefire way to do this. Now I'm just attempting to get this to work for my own browser window, I will work on mobile and tablet etc when it comes time. I use google chrome w/ a 1920 x 1080 resolution.

Can I get pointed in the right direction. Thank you.

html
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link type="text/css" rel="stylesheet" href="styles/styles.css"/>

<script src="myScript.js"></script>

<title>William Leininger</title>

</head>
<body>
	<div id="header">
  	<ul>
  	  <li id="fancy"><a href="index.html">home</a></li>        
  	  <li id="fancy"><a href="about.html">about</a></li>
  	  <li id="fancy"><a href="mailto:williamrleininger@gmail.com">williamrleininger@gmail.com</a>
  	  <li id="fancy"><a href="resume.html">resume</a></li>
      <li id="fancy"><a href="portfolio.html">portfolio</a></li>
  </ul>
 </div>
        <div id="content">
          <h3>intro</h3>
            <p>i am william leininger, graphic designer</p>
        </div>    
    </body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->




css
*
{
    margin:0;padding:0;    
}
html,body
{
    height:100%;
    width:100%;
}
body
{
/*    display:table; for table attempt to fill page content automatically*/
}
#header
{
    width: 100%;
	height: 15px;
/*    background: #2790D8;*/
/*    display:table-row; for table attempt to fill page content automatically*/ 
	text-align:center;
}
#fancy {
    display:inline;
	left:25%; /*keep header in center on iPhone5 mobile */
}
#content {
	background: #FF0000;
    background-image:url(images/sky_background-copy.png)
	width: 1366px;
	height:768px;
}
ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-decoration: none;
	}

#fancy{
	display:inline;
	}
	
a:hover{
	text-decoration:none;
}

/*#email{
    float:right;
	margin-right: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: #ffffff;
}
*/

/* to bottom of media queries
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 65%;
	}

}

/* for 700px or less */
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}

}
from opening of media queries*/



Javascript
// Javascript Document
function jsUpdateSize(){
    // Get the dimensions of the viewport
    var width = window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
    var height = window.innerHeight ||
                 document.documentElement.clientHeight ||
                 document.body.clientHeight;

    document.getElementById('jsWidth').innerHTML = width;  // Display the width
    document.getElementById('jsHeight').innerHTML = height;// Display the height
};
window.onload = jsUpdateSize;       // When the page first loads
window.onresize = jsUpdateSize;     // When the browser changes size



Is This A Good Question/Topic? 0
  • +

Replies To: Epic Failing at auto filling screen with div size

#2 Pogaca  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 40
  • Joined: 24-August 13

Re: Epic Failing at auto filling screen with div size

Posted 04 September 2013 - 06:02 AM

I did it on rly simple way and this is just an example how you should do it:

<html>
<head>
<style type="text/css">
* {
padding:0px;	
margin:0px;
}
#header {
position:relative;
height:200px;
width:100%;
z-index:1;
background-color:red;
}
#content {
margin:0px;
width:100%;
height:100%;
z-index:-1;
position:absolute;
background-color:blue;	
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#3 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Epic Failing at auto filling screen with div size

Posted 04 September 2013 - 01:14 PM

Thank you, that fixes it marvelously!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1