html - Get footer to go to bottom of display -
i got footer im wanting go bottom of display , stay there (not fixed position want change content in it). @ moment made sticky footer , moves content, im wanting positioned @ bottom of display there isnt weird floating gap huge space beneath it.
html:
<!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>home</title> <!--===================================================css links===================================================!--> <link href='http://fonts.googleapis.com/css?family=raleway:600,500,400,200' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=roboto:400,700,900,100,300' rel='stylesheet' type='text/css'> <link href="css/default_style.css" rel="stylesheet" type="text/css" /> <link href="css/contact_style.css" rel="stylesheet" type="text/css" /> </head> <body> <!--===================================================header===================================================!--> <div class="wrapper"> <div class="headerwrap"> <div class="social"> <a href="www.facebook.com"><img class="move" src="images/deviant.png"></a> <a href="www.facebook.com"><img class="move" src="images/yt.png"/></a> <a href="www.facebook.com"><img class="move" src="images/fb.png"/></a> </div> <!--close social!--> <div class="header"> <div class="logo"> <img src="images/logo.png" /> </div> <!--close logo--> </div> <!--close header!--> <div class="menu"> <ul class="menutxt"> <li><a href="index.html">home</a> </li> <li><a href="portfolio.html">portfolio</a> </li> <li><a href="contact.html">contact</a> </li> </ul> </div> <!--close menu!--> </div> <!--close headerwrap!--> <!--===================================================contact===================================================!--> <div class="toptxt"> <div id="test2"> <p class="infotxt">get in touch...</p> </div> </div> <div class="detailwrap"> <div class="contactspace"></div> <!--close contactspace!--> <div class="contact"> <img class="move2" class="hover" src="images/me2.png"> <p class="text">luke babich</p> </div> <!--close contact!--> <div class="contact"> <img class="move2" class="hover" src="images/phone.png"> <p class="text">+27 72 836 0954</p> </div> <!--close contact!--> <div class="contact"> <img class="move2" class="hover" src="images/mail.png"> <p class="text">lukerbab@gmail.com</p> </div> <!--close contact!--> <div class="contactspace"></div> <!--close contactspace!--> </div> <!--close detailwrap!--> <!--===================================================footer===================================================!--> <div class="footerwrap2"> <p class="foottxt">designed , developed luke babich- rights reserved ©2015</p> </div> <!--close footerwrap!--> </div> <!--close wrapper!--> </body> </html> </i> layout css:
@charset "utf-8"; /*---------------------------- body , default ----------------------------*/ body { margin:0 auto; background:#171717; font-family: 'roboto', sans-serif; color:#ccc; } a{ color:#000; transition:300ms; } a:hover { color:#000; } a:link { text-decoration: none; } /*---------------------------- main wrapper ----------------------------*/ .wrapper{ position:relative; width:100%; } /*---------------------------- header ----------------------------*/ .header{ position:relative; min-height:180px; height: 100%; padding-right:225px; margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; -moz-box-shadow: 0px 10px 20px 0px #333 ; -webkit-box-shadow: 0px 10px 20px 0px #333 ; box-shadow: 0px 10px 20px 0px #000; z-index:200; } .logo{ position: absolute; min-width:60px; top:4%; } .logo img{ display: block; margin-left: auto; margin-right: auto; width:100%; } .social{ position: absolute; width:100%; min-width:20px; top:15px; right:1%; z-index:500; } .social img{ float:right; width:35px; display: block; padding:0 0 0px 15px; } img.move { bottom:0px; transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2); } img.move:hover { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.4, 1.4, 1.4); } /*---------------------------- menu ----------------------------*/ .menu{ position:absolute; width:100%; top:200px; z-index:401; } ul { margin: 0 auto; padding:0 0 5px 0; list-style-type: none; } li{ display: inline; list-style:none; padding:1%; transition: 300ms; } li a{ color:#ccc; transition:300ms; } li a:hover { color:#900; } .menutxt{ text-align: center; font-family: 'raleway', sans-serif; font-size:1.8vw; font-weight:400; z-index:300; } /*---------------------------- footer text ----------------------------*/ .foottxt{ width:100%; text-align: center; background:#070707; font-family: 'roboto', sans-serif; padding:15px 0; font-size:0.7em; color:#ffffff; font-weight:200; margin: 0; box-sizing: border-box; } content css:
@charset "utf-8"; /*---------------------------- content ----------------------------*/ .toptxt{ margin-top:130px; width:100%; } /*.contactwrap{ width:100%; change if cant figure out margin-top:60px; }*/ .detailwrap{ margin-top:100px; width:100%; text-align: center; /* center align .contacts */ } /* clearfix */ .detailwrap:after { content: ""; display: table; clear: both; } .infotxt{ text-align: center; font-family: 'raleway', sans-serif; font-size:2em; font-weight:400; } .contact { display: inline-block; /* make possible use text-align */ width: 15%; min-width: 180px; /* avoid 15% being making contacts less 115px */ margin: 4% 1% 10% 0; } .contact img{ width: 90px; display: block; margin: 0 auto; max-width: 100%; /*bring if needed*/ height: auto; /*bring if needed*/ } .contact .text { top:-15px; text-align:center; visibility:hidden; } .contact:hover .text { animation: fadein 2s; visibility:visible; } img.move2 { bottom:0px; transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2); } img.move2:hover { -moz-transform: translate(-2px, -2px); -ms-transform: translate(-2px, -2px); -o-transform: translate(-2px, -2px); -webkit-transform: translate(-2px, -2px); transform: translate(0px, -10px) } /*---------------------------- footer ----------------------------*/ .footerwrap2{ position:relative; width:100%; z-index:501; -moz-box-shadow: 0px -10px 20px 0px #000; -webkit-box-shadow: 0px -10px 20px 0px #000; box-shadow: 0px -10px 10px 0px #000; } /*---------------------------- textfader ----------------------------*/ #test2 p { animation: fadein 5s; -moz-animation: fadein 5s; /* firefox */ -webkit-animation: fadein 5s; /* safari , chrome */ -o-animation: fadein 5s; /* opera */ transition: opacity 5s; } @keyframes fadein { { opacity:0; } { opacity:1; } } @-moz-keyframes fadein { /* firefox */ { opacity:0; } { opacity:1; } } @-webkit-keyframes fadein { /* safari , chrome */ { opacity:0; } { opacity:1; } } @-o-keyframes fadein { /* opera */ { opacity:0; } { opacity: 1; } } i wasnt sure code needed , had 2 style sheets may affect footer div......so im wanting .footerwrap2 @ bottom of browser after device , browser size changes. in advance!
i copied code local page , added following lines:
for footerwrap2, changed position relative absolute, , positioned @ bottom of page.
position:absolute; bottom: 0; as you've found, wasn't enough. body, , wrapper div have no idea how tall content page is, therefore, determine size based on content.
i solved problem adding following style main wrapper (.wrapper)
height: 100vh; this uses latest css3 view height work on modern browsers. if must maintain compatibility older browsers, you'll need set height body, wrapper, , possibly html tags 100%.
i tested locally , works champ. if can't work, i'll move fiddle.
good luck!
Comments
Post a Comment