html - How to make a div and a footer extend to the bottom of a page and not just the window? -

-

i've been searching on how colored div on side of page , footer go way bottom of page. i've tried sticky footer couldn't work. see i'm talking go here: http://web2.nicholls.edu/maco-web-2/habitat/workfiles/trial%20fix.html
both light blue rectangle (the events background div) , footer bar go bottom of window, when scroll down,you can see content has extended down past them.

here's html , css. (i apologize if code super awful, class , first website i've ever tried build.

       @charset "utf-8";      /* css document */            html,body { height:100%; }            body {      	font-family: helvetica, arial, sans-serif;      	margin:0;            }            #navbar{      	position:absolute;      	top:0px;      	height:88px;      	background-color: #314d89;      	width:100%;      	z-index:75;      }            #wrapper {      	width:90%;      	margin-left:auto;      	margin-right:auto;      	position:relative;      	height:100%;;      	      }            #logo {      	position:absolute;      	margin-right:0;      	top:0;      	z-index:80;      }            #nav {      	font-size:1.25em;      	color:white;      	z-index:100;      	position:absolute;      	right:0px;      	top:60px;      }            #big-photo{      	width:100%;      	position:absolute;      	top:80px;      	background-image:url(../images/photo_01.jpg);      	background-repeat:no-repeat;      	height:400px;      	background-size:100%;      	z-index:50;      	-webkit-box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.5);      -moz-box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.5);      box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.5);      }            #news{      position:absolute;      top:490px;	      width:50%;      }      	                  #events-background {      	position:absolute;      		width:35%;      		background-color: #698bd3;      		height:100%;      		top:0px;      		right:0px;      }            #upcoming-events {      	position:absolute;      	top: 490px;      	margin-right:0;      	width:30%;      	right:0px;      }      	      #footer-bar {      	width:100%;      	height:40px;      	background-color:#314d89;      	position:absolute;      	bottom:0px;            }      .white-header {      	color: #ffffff;      	font-weight:300;      	text-transform:uppercase;      font-size:2em;      }      .green-header {      	color: #84d67b;      	font-weight:300;      	font-size:2em;      	text-transform:uppercase;      }
    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org        /tr/xhtml1/dtd/xhtml1-transitional.dtd">      <html xmlns="http://www.w3.org/1999/xhtml">      <head>      <meta http-equiv="content-type" content="text/html; charset=utf-8" />      <title>untitled document</title>      <link href="trial fix css.css" rel="stylesheet" type="text/css" />      </head>            <body>      <div id="navbar"> </div>      <div id="big-photo"> </div>      <div id="events-background"> </div>      <div id="wrapper">      <div id="nav"> | volunteer | apply | restore | calendar | gallery | contact </div>      <div id="logo"><img src="../images/fixed-logo_02.png" width="295" height="148" alt="bayou habitat humanity logo" /> < </div>            <div id="news"> <h2 class="green-header"> habitat news </h2> <p> volunteer day </p> <p> volunteer day saturday, december 14th, @ habitat humanity site in thibodaux.            having details of syndication contracts , movie packages exposed potentially put millions of dollars in future deals @ risk. of these little, individual show , movie deals add billions of dollars in revenue sony pictures annually. sure, while 2009 cash licensing deal of $26,600 television station in detroit 133 episodes of times aired september 2009–2010 doesn’t seem ton of money, fact sony still banking cash show 35 years after aired speaks revenue-generating capabilities of library content. (good times aired last original episode in 1979.)            think how potential revenue seinfeld, not mention jeopardy , wheel of fortune, sony pictures produces, capable of generating on next 2 decades , how of left on table result of leak.            that’s frightening scenario sony pictures faces, @ time when trying increase annual revenue $11 billion 2018 $8 billion now.       </p></div>      <div id="upcoming-events"> <h2 class="white-header"> upcoming events </h2>       <p> christmas toy drive </p> </div>            <div id="statement"> pledged letter , spirit of u.s. policy achievement of equal housing opportunity throughout nation. encourage , support affirmative advertising , marketing program in there no barriers obtaining housing because of race, color, religion, sex, handicap, familial status, national origin, age, marital status, sexual orientation, or sources of income.  </div>      <div id="about" >© 2014 bayou area habitat humanity      [ phone: (985) 447-6999 ] [ contact via email ]      [ privacy policy ] </div>      <div id="newsletter"></div>      </div>      <div id="footer-bar"></div>      </body>      </html>

add position:fixed element , bottom: 0px;

or

position: absolute; bottom: 0px;

Comments

Post a Comment

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

-
i have write down code showing error ma not getting it: please help: showing mat not numerical tuple: import cv import cv2 capture = cv2.videocapture("j.3gp") while(1): _, frame1 = capture.read() grayimage1 = cv2.cvtcolor(frame1, cv2.color_bgr2gray) _, frame2 = capture.read() grayimage2 = cv2.cvtcolor(frame2, cv2.color_bgr2gray) differenceimage = cv2.absdiff(grayimage1,grayimage2) thresholdimage = cv2.threshold(differenceimage,25,255,cv2.thresh_binary) cv2.imshow("difference image", differenceimage) cv2.imshow("threshold image", thresholdimage) cv2.imshow("image", frame1) k = cv2.waitkey(30) & 0xff error arising : ----------------------------------------------------------------------------------------- traceback (most recent call last): file "desk.py", line 15, in <module> cv2.imshow("threshold image", thresholdimage) typeerror: mat not numerical tuple
Read more

c# - MSAA finds controls UI Automation doesn't -

-
i'm working on automating windows application. i'm using teststack white framework. i've hit problem. program has 'window' object cannot see inside of. white shows no controls inside of it. inspect.exe shows no controls inside of either when running in ui automation mode. if switch inspect msaa see controls inside fine. there anyway me use msaa c# handle on these controls? if can identify msaa functions need, can use p/invoke call them c#. here's example article doing msaa: http://www.codeproject.com/articles/38906/ui-automation-using-microsoft-active-accessibility also, pinvoke.net can used identify iaccessible (msaa) functions: http://www.pinvoke.net/search.aspx?search=iaccessible&namespace=[all] here's answer along lines: msaa com-based? finally, alternative p/invoke, might able use tlbimp.exe create wrapper assembly oleacc.dll, , access msaa functions through it. i'm not sure if works msaa, it's worth try. as e
Read more

wordpress - .htaccess: RewriteRule: bad flag delimiters -

-
pulling hair out on one. have following .htaccess file custom redirects in addition wordpress's default settings. when tested on local wamp server worked fine after moving production i'm not getting rewriterule: bad flag delimiters error in server log , after while site goes down internal server error any appreciated. in advance! <ifmodule mod_rewrite.c> rewriteengine on rewritebase / rewriterule ^rockford_weddings___welcome\.html$ /wedding/ [r=301,l] rewriterule ^blog/?$ /journal/ [r=301,l] rewriterule ^blog/(.*)$ /$1 [r=301,l] rewriterule ^portraitinvestment/?$ /portraitinvestment\.pdf [r=301,l] rewriterule ^weddinginvestment/?$ /weddinginvestment\.pdf [r=301,l] rewriterule ^holidaycards2014/?$ /holidaycards2014\.pdf [r=301,l] </ifmodule> # begin wordpress <ifmodule mod_rewrite.c> rewriteengine on rewritebase / rewriterule ^index\.php$ - [l] rewritecond %{request_filename} !-f rewritecond %{request_filename} !-d rewriterule . /index.php [l] </
Read more