Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
Regular Coder
Join Date: Dec 2010
Posts: 411
Thanks: 21
Thanked 55 Times in 55 Posts
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
PM User | 2
Supreme Master coder!
Join Date: Mar 2007
Location: N/A
Posts: 14,678
Thanks: 158
Thanked 2,182 Times in 2,169 Posts
Quote:
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
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
PM User | 3
Regular Coder
Join Date: Dec 2010
Posts: 411
Thanks: 21
Thanked 55 Times in 55 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; }
PM User | 4
Master Coder
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,447
Thanks: 0
Thanked 496 Times in 488 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.
PM User | 5
Regular Coder
Join Date: Dec 2010
Posts: 411
Thanks: 21
Thanked 55 Times in 55 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.
PM User | 6
Regular Coder
Join Date: Dec 2010
Posts: 411
Thanks: 21
Thanked 55 Times in 55 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="#"><< 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"> </div>
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li id="toggle">
<a id="open" class="open" href="#">SIGN IN | 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 -->
PM User | 7
Master Coder
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,447
Thanks: 0
Thanked 496 Times in 488 Posts
Quote:
Originally Posted by
aaronhockey_09
The only container it is inside is
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.
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 01:58 PM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
Problem with 100% Height
