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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts

    Thumbs down Problem with 100% Height

    Hey guys, so i have a quick question i was hoping you can help me out with
    So i have a bar that slides down and displays login information and some pictures.

    And when it does this, i have a div that is white with a 40% opacity.
    I have it set to width 100% and height 100%.

    The problem is when i scroll down the page, the white div doesnt go all the way down.

    Any help

    You can see the site at http://www.aaron-armstrong.com/scanzai

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    So i have a bar that slides down and displays login information and some pictures.
    I don't see any sliding bar in that given link
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Sorry, i really must be more descriptive my posts.
    If you click on Sign in / Browse Stream, it drops down.

    This is the CSS for the div that is jsut white

    Code:
    .white-top { width:100%; float:left; height:100%; background:#fff; opacity:0.4; position:absolute; }

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    How big is the container that it is inside of? It can only ever be 100% of that size. The only way to make it bigger than that is to make the container it is in bigger as well.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    The only container it is inside is

    Code:
    #toppanel {
        position: absolute;   /*Panel will overlap  content */
        /*position: relative;*/   /*Panel will "push" the content down */
        top: 0;
        width: 100%;
        z-index: 999;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    	
    }
    but when i set the height to 100% for it. The white seems to automatically show. And still doesnt go through the whole page.

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    You can see the css here

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    /* ----------------------------------------------------------------------------*/
    /* ---- 1. Presets / Resets ---------------------------------------------------*/
    /* ---- 2. Default Classes ----------------------------------------------------*/
    /* ---- 3. Fonts --------------------------------------------------------------*/
    /* ---- 4. Main ---------------------------------------------------------------*/
    /* ---- 5. Top Tab ---------------------------------------------------------------*/
    
    /* ----------------------------------------------------------------------------*/
    
    /* ----------------------------------------------------------------------------*/
    /* -----1. Presets / Resets ---------------------------------------------------*/
    /* ----------------------------------------------------------------------------*/
    
    html, body, div, span, applet, object, iframe, form, h1, h2, h3, h4, h5, h6, p, blockquote, a, em, font, img, small, strike, samp, strong, sub, sup, label, caption, ul, ol, dl
    	{ 
    		margin: 0; 
    		padding: 0; 
    		border: 0;
    		vertical-align: baseline;
    	}
    	
    	table
    	{ 
    		border-collapse: collapse; 
    		border-spacing: 0; 
    	}
    	 
    	caption, th, td
    	{ 
    		text-align: left; 
    		font-weight: normal; 
    	}
    	
    	table, tbody, tfoot, thead, tr, th, td
    	{
    		vertical-align: top;
    	}
    
    /* ----------------------------------------------------------------------------*/
    /* -----End of Presets / Resets -----------------------------------------------*/
    /* ----------------------------------------------------------------------------*/
    
    /* ----------------------------------------------------------------------------*/
    /* -----2. Default Classes ----------------------------------------------------*/
    /* ----------------------------------------------------------------------------*/
    
    .clear 	{ clear: both;  }
    
    	
    	.clearfix:after 				{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    	* html .clearfix            	{ zoom: 1; } /* IE6 */
    	*:first-child+html .clearfix 	{ zoom: 1; } /* IE7 */
    	
    	img.fl_left		{ display: block; margin: 0 1em 1em 0; }
    	img.fl_right	{ display: block; margin: 0 0 1em 1em; }
    	
    	.fl_left 		{ float: left; }
    	.fl_right 		{ float: right; }
    	.fl_absMiddle	{ display: block; text-align: center; margin: 0 auto; }
    	
    	.txt-right		{ text-align: right; }
    	.txt-left		{ text-align: left; }
    	.txt-center		{ text-align: center; }
    	
    	.hide			{ display: none; }
    	.show			{ display: block; }
    	
    	.print-only		{ display: none; }
    	
    	html { font-size: 100%; }
    	body { color: #858585; font: normal 12px/12px Arial, Helvetica, sans-serif; background:url(bg.jpg) repeat-x top;   }
    	* {margin:0;padding:0; } 
    	html, body {height: 100%;}
    	
    	/* Headings */
    		h1, 
    		h2, 
    		h3, 
    		h4, 
    		h5, 
    		h6	{ font-weight: normal; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; }
    		
    		h1	{ font-family: 'Lobster13Regular' !important; }
    		h2	{ color:#474747; font-size:58px; font-family:impact; line-height:normal; font-family:'AkzidenzGroteskBQCondensedBd';}
    		h3	{ font-family:'AkzidenzGroteskBQLightSmallRg'; font-size:22px; text-transform:capitalize; color:#9b0000; }
    		h4	{ font-size:26px; font-family:'AkzidenzGroteskBQLightSmallRg'; color:#9b0000; }
    		h5	{ }
    		h6	{ }
    		
    	/* Paragraph */
    		p 	{ }
    		
    	/* Links */
    		
    		
    	/* Lists */
    		ul	{ margin: 0 0 1em; list-style: none; }
    		ol	{ margin: 0 0 1em; }
    		
    		ol	{ padding: 0 0 0 1.4em; margin-left: 0; }
    		ol li	{ margin-left: .4em; }
    		.none { border:none !important; }
    	    
    		
    	/* Forms */
    		input,
    		textarea 	{ }
    		input:focus	{ outline: none; }
    		
    		textarea,
    		.input-text	{ }
    		
    		fieldset	{ }
    		label		{ }
    		legend		{ }
    		
    	/* Blockquote */
    		blockquote		{ }
    		blockquote p	{ }
    		
    	/*  Image  */
    		img	{   }
    		img:hover	{   }
    				
    		/* Links */
    		a,
    		a:link 		{ color:#F60; text-decoration:none;}
    		a:visited	{ color:#F60; text-decoration:none; }
    		a:active,
    		a:focus,
    		a:hover		{ color:#333;}
    		
    		::selection { background: #9b0000; color: #fff; }
    
    		::-moz-selection { background: #9b0000; color: #fff; }
    		
    /* ----------------------------------------------------------------------------*/
    /* -----End of Default Classes ------------------------------------------------*/
    /* ----------------------------------------------------------------------------*/
    
    /* ----------------------------------------------------------------------------*/
    /* -----3. Fonts --------------------------------------------------------------*/
    /* ----------------------------------------------------------------------------*/
    
    
    
    @font-face {
        font-family: 'AkzidenzGroteskBQCondensedBd';
        src: url('akzidenzgroteskbq-bdcnd-webfont.eot');
        src: url('akzidenzgroteskbq-bdcnd-webfont.eot?#iefix') format('embedded-opentype'),
             url('akzidenzgroteskbq-bdcnd-webfont.woff') format('woff'),
             url('akzidenzgroteskbq-bdcnd-webfont.ttf') format('truetype'),
             url('akzidenzgroteskbq-bdcnd-webfont.svg#AkzidenzGroteskBQCondensedBd') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'AkzidenzGroteskBQLightRegular';
        src: url('akzidenzgroteskbq-light-webfont.eot');
        src: url('akzidenzgroteskbq-light-webfont.eot?#iefix') format('embedded-opentype'),
             url('akzidenzgroteskbq-light-webfont.woff') format('woff'),
             url('akzidenzgroteskbq-light-webfont.ttf') format('truetype'),
             url('akzidenzgroteskbq-light-webfont.svg#AkzidenzGroteskBQLightRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'AkzidenzGroteskBQLightSmallRg';
        src: url('akzidenzgroteskbq-lightsc-webfont.eot');
        src: url('akzidenzgroteskbq-lightsc-webfont.eot?#iefix') format('embedded-opentype'),
             url('akzidenzgroteskbq-lightsc-webfont.woff') format('woff'),
             url('akzidenzgroteskbq-lightsc-webfont.ttf') format('truetype'),
             url('akzidenzgroteskbq-lightsc-webfont.svg#AkzidenzGroteskBQLightSmallRg') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'AkzidenzGroteskBQSuperRegular';
        src: url('akzidenzgroteskbq-super-webfont.eot');
        src: url('akzidenzgroteskbq-super-webfont.eot?#iefix') format('embedded-opentype'),
             url('akzidenzgroteskbq-super-webfont.woff') format('woff'),
             url('akzidenzgroteskbq-super-webfont.ttf') format('truetype'),
             url('akzidenzgroteskbq-super-webfont.svg#AkzidenzGroteskBQSuperRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    
    
    
    
    /* ----------------------------------------------------------------------------*/
    /* -----End of Fonts ----------------------------------------------------------*/
    /* ----------------------------------------------------------------------------*/
    
    /* ----------------------------------------------------------------------------*/
    /* -----4. Main ---------------------------------------------------------------*/
    /* ----------------------------------------------------------------------------*/
    
    .container { width:960px; margin:0 auto; position:relative;  }
    #wrapper { background:url(bg.png) no-repeat center top;  margin-top:65px; float:left; width:100%;  }
    .header { float:left; clear:both; width:100%; }
    .logo { float:left; width:315px; }
    .main { float:left; width:100%; clear:both; }
    .leave-your-mark h2 { background:#fff; line-height:70px; }
    .leave-your-mark { width:360px; float:left; margin-left:330px; margin-top:100px;  }
    .leave-your-mark p { color:#737373; background:#fff; width:270px; font-size:34px; line-height:40px; margin-top:20px; font-family:'AkzidenzGroteskBQLightRegular'; }
    .download-icons { float:left; clear:both; width:350px; margin-left:300px; text-align:center; margin-top:100px;}
    .download-icons a { margin-top:20px; }
    .download-icons a img { border:dashed 0px #000000;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px; }
    .discover { width:385px; float:left; margin-left:560px; clear:both; margin-top:120px; background-color:#fff; }
    .discover p { color:#313131; line-height:24px; font-size:18px; margin-top:20px; font-family:'AkzidenzGroteskBQLightRegular'; width:365px; }
    .scan  { float:right; width:355px;  clear:both; margin-top:100px;  }
    .scan p { text-align:right;  color:#313131; line-height:24px; font-size:18px; margin-top:20px;font-family:'AkzidenzGroteskBQLightRegular'; }
    .scan h4 { text-align:right; }
    .share { width:385px; float:left; margin-left:560px; clear:both; margin-top:110px;  }
    .share p { color:#313131; line-height:24px; font-size:18px; margin-top:20px;font-family:'AkzidenzGroteskBQLightRegular'; }
    .app-demo { width:385px; float:left; margin-left:320px; clear:both; margin-top:80px;  }
    .extra { font-size:16px; padding-top:15px; font-family:'AkzidenzGroteskBQLightRegular'; }
    .red { color:#9b0000; }
    .footer { clear:both; width:100%; background:url(footer.png) repeat-x; float:left; height:239px; margin-top:20px;  }
    .footer-right { width:620px; float:right; }
    .footer-left { width:312px; float:left; }
    .footer-logo { float:left; }
    .footer .container { margin-top:40px; }
    .footer .navigation { width:620px;  }
    .footer .navigation ul { float:right; margin-top:8px; }
    .footer .navigation ul li { float:right; padding-right:15px; padding-left:15px; list-style:none; color:#fff; background:url(footer-nav-ul.png) no-repeat right center;   }
    .footer .navigation ul li a { color:#fff; font-family:'AkzidenzGroteskBQLightRegular'; font-size:15px; }
    .nav-download { float:right; margin-top:10px; clear:both; width:620px;  }
    .nav-download a { float:right; padding-left:20px; }
    .nav-download a img { border:dashed 0px #000000;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px; }
    .no-bg { background:none !important; }
    .yellow { color:#fffb8b !important; font-family:'AkzidenzGroteskBQLightRegular';}
    .white { color:#fff; font-family:'AkzidenzGroteskBQLightRegular'; }
    .none2 { padding:0 !important; margin:0 !important; }
    .footer-text { float:right; margin-top:15px; clear:both; width:100%; }
    .footer-text span { padding-bottom:10px; clear:both; float:right; }
    .moto { margin-left:50px; margin-top:5px; float:left; color:#fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; line-height:20px; }
    
     
    /* ----------------------------------------------------------------------------*/
    /* -----4. End Main -----------------------------------------------------------*/
    /* ----------------------------------------------------------------------------*/
    
    /* ----------------------------------------------------------------------------*/
    /* -----5. Top Tab ------------------------------------------------------------*/
    /* ----------------------------------------------------------------------------*/
    
    /* Panel Tab/button */
    .tab {
      	background: url(images/tab_b.png) repeat-x 0 0;
    	height: 42px;
    	position: relative;
        top: 0;
        z-index: 999;
    }
    
    .tab ul.login {
    	display: block;
    	position: relative;
      	float: right;
      	clear: right;
      	height: 42px;
    	width: auto;
      	font-weight: bold;
    	line-height: 42px;
    	margin: 0;
    	right: 150px;
      	color: white;
      	font-size: 80%;
    	text-align: center;
    }
    
    
    .tab ul.login li {
     	text-align: left;
      	padding: 0 3px;
    	display: block;
    	float: left;
    	height: 39px;
    	margin-top:14px;
    	margin-left:-1px;
    	width:471px;
      	background: url(images/tab_whole.png) repeat-x 0 0;
    }
    
    
    .tab ul.login li a {
    	color: #fff;
    }
    
    .tab ul.login li a:hover {
    	color: white;
    }
    
    .tab .sep {color:#414141}
    
    
    
    .tab a.open, .tab a.close, .tab a.register{
    	
    	line-height: 20px !important;
    	margin-top:5px;
    	cursor: pointer;
    	display: block;
    	width: 300px;
    	text-align:center;
    	position: relative;
    	font-size:13px;
    	color:#fff;
    	
    }
    
    .tab a.register { float:right; color:#980707 !important; width:180px; margin-top:-20px;  }
    
    
    
    /* sliding panel */
    .panel-white { background-color:#fff; width:100%; height:100%; position:fixed; opacity:0.4;
    filter:alpha(opacity=40); display:none; /* For IE8 and earlier */
     }
    #toppanel {
        position: absolute;   /*Panel will overlap  content */
        /*position: relative;*/   /*Panel will "push" the content down */
        top: 0;
        width: 100%;
        z-index: 999;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    #panel {
    	width: 100%;
    	height: 370px;
    	color: #999999;
    	background: url(images/bg.png) repeat;
    	overflow: hidden;
    	position: relative;
    	z-index: 3;
    	display: none;
    }
    
    #panel a { color:#fff; }
    #panel a:hover { color:#ff6666; }
    
    .panel-container { width:960px; margin:0 auto; margin-top:30px; color:#fff; }
    .white-top { width:100%; float:left; height:100%; background:#fff; opacity:0.4; position:absolute; }
    
    .top-panel { width:100%;  }
    .panel-logo { float:left;  }
    .full-panel { clear:both; margin-top:20px; width:100%; float:left;  }
    .full-panel .left { float:left; }
    .full-panel .right { float:right; }
    .full-panel .left a { float:left; margin-right:40px; }
    .full-panel .pictures { float:left; width:100%; clear:both; margin-top:20px;  }
    .full-panel .pictures a { border:#CCCCCC 3px solid; float:left; margin:0 24px 0 0; width:110px !important; height:110px !important; overflow:hidden;}
    .full-panel .pictures a:hover { border:#FF6666 3px solid; }
    .login { float:right; margin-top:10px; width:430px; }
    .login form { float:left; }
    .input-field { background:url(login-bg.png) no-repeat; float:left; width:138px; height:24px; border:none; padding:1px 30px 0 13px; color:#aaa; font-size:11px; }
    .sign-in { float:left; }
    .check-box { float:left; clear:both; margin-top:20px; width:100%;  }
    .check-box-txt { float:left; margin-left: 10px; }
    
    
    /* ----------------------------------------------------------------------------*/
    /* -----End Top Tab  ----------------------------------------------------------*/
    /* ----------------------------------------------------------------------------*/
    and this is what the top panel html looks like

    Code:
    <!-- Panel -->
    <div id="toppanel">
    
    	<div id="panel">
        
        	<div class="panel-container">
                <div class="top-panel">
                    <div class="panel-logo"><a href="#"><img src="footer-logo.png" alt="" /></a></div>
                    <div class="login">
                <form action="">
    				<div><input type="text" class="input-field" name="searchbox" value="Enter Username" onfocus="if(this.value=='Enter Username') this.value='';" onblur="if(this.value=='') this.value='Enter Username';" /></div>
    			</form>
                
                <form action="">
    				<div><input type="text" class="input-field" name="searchbox" value="Enter Password" onfocus="if(this.value=='Enter Password') this.value='';" onblur="if(this.value=='') this.value='Enter Password';" /></div>
    			</form>
                
                
                <div class="sign-in"><a href="#"><img src="sign-in.png" width="64" height="24" alt="" /></a></div>
                
                <div class="check-box">
                  	<input name="Remember me for 2 weeks" type="checkbox" value="" class="fl_left" /> <span class="check-box-txt">Remember me for 2 weeks</span>
                    <span class="fl_right"><a href="#">Forgot password?</a></span>
                  </div>
                  </div>
                  
                  
                </div>
                
                <div class="full-panel">
                    <div class="left">
                        <a href="#">&lt;&lt; Browse older posts </a>
                        <a href="#">Browse Newer Posts >></a>
                    </div>
                    <div class="right">Not a member yet ... <a href="#" class="yellow">Register Now !</a></div>
                    <div class="pictures">
                        <a href="#"><img src="Ayukawa.jpg" alt="" width="110" height="110"/></a>
                        <a href="#"><img src="QR-code.png" alt="" width="110" height="110" /></a>
                        <a href="#"><img src="volt-video-thumbnail.png" alt="" width="110" height="110" /></a>
                        <a href="#"><img src="Ayukawa.jpg" alt="" width="110" height="110"/></a>
                        <a href="#"><img src="QR-code.png" alt="" width="110" height="110" /></a>
                        <a href="#"><img src="volt-video-thumbnail.png" alt="" width="110" height="110" /></a>
                        <a href="#" class="none2"><img src="Ayukawa.jpg" alt="" width="110" height="110"/></a>
                        
                    </div>
                </div>
                <div class="full-panel">
                	 <div class="left"><a href="#">Go to Scanzai map overlay</a></div>
                </div>
            </div>
            
      
    </div> <!-- /login -->	
    <div class="white-top">&nbsp;</div>
    
    	<!-- The tab on top -->	
    	<div class="tab">
    		<ul class="login">
    			
    			<li id="toggle">
    				<a id="open" class="open" href="#">SIGN IN &nbsp;&nbsp;|&nbsp;&nbsp; BROWSE STREAM</a>
                    <a class="register" href="http://www.google.com">or Register Now</a>
    				<a id="close" style="display: none;" class="close" href="#">Close Panel</a>			</li>
    			
    	  </ul> 
             
    	</div> <!-- / top -->
        
       
    	
    </div> <!--panel -->

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    The only container it is inside is

    but when i set the height to 100% for it. The white seems to automatically show. And still doesnt go through the whole page.
    That container can also only be as heigh as whatever contains it.

    For something to be able to fill the full height of the viewport the html and body containers need to have 100% height.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    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
    •