html - Extend div all the way to bottom without scrollbar -
i've got problem can't seem extend div way bottom. i've looked here on stackoverflow , found topics , tried out doesn't work 100%, creates scrollbar also.
i'm using twitter bootstrap project btw.
html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>divespotter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- fonts --> <link href='http://fonts.googleapis.com/css?family=montserrat' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=open+sans' rel='stylesheet' type='text/css'> <!-- le styles --> <link href="css/bootstrap.css" rel="stylesheet"> <style> body { padding-top: 60px; /* 60px make container go way bottom of topbar */ } </style> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- html5 shim, ie6-8 support of html5 elements --> <!--[if lt ie 9]> <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- fav , touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="../assets/ico/favicon.png"> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">divespotter</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">ontdek</a></li> <li><a href="#about">gallerij</a></li> <li><a href="#contact">forum</a></li> <li><a href="#contact">blog</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div class="maincontent"> <div class="container"> <div class="row"> <div class="span6"> <p class="title">hét digitaal logboekje.</p> <p class="intro">het logboek een belangrijk onderdeel voor dé beste duikervaring. divespotter helpt u deze ervaringen nooit meer zal vergeten.</p> <p class="register"><a href="#" >registreer nu!</a></p> </div> <div class="span6"> <div id="mycarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> </ol> <!-- carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="img/afb1.jpg"/> <div class="carousel-caption"> eerste afbeelding </div> </div> <div class="item"> <img src="img/afb2.jpg"/> <div class="carousel-caption"> tweede afbeelding </div> </div> <div class="item"> <img src="img/afb3.jpg"/> <div class="carousel-caption"> derde afbeelding </div> </div> </div> <!-- carousel nav --> <a class="carousel-control left" href="#mycarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#mycarousel" data-slide="next">›</a> </div> </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="span4"> <p>log</p> <p>leg al je duikervaringen vast zodat je er later terug van kan genieten precies of je erbij bent.</p> </div> <div class="span4"> <p>ontdek</p> <p>ontdek nieuwe duiklocaties, leer van mededuikgenoten en bekijk foto’s van andere duikers on de hele wereld.</p> </div> <div class="span4"> <p>deel</p> <p>deel al je duikervaringen en foto’s met je vrienden op facebook, twitter, ...</p> </div> </div> </div></div> <!-- le javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="js/bootstrap-transition.js"></script> <script src="js/bootstrap-alert.js"></script> <script src="js/bootstrap-modal.js"></script> <script src="js/bootstrap-dropdown.js"></script> <script src="js/bootstrap-scrollspy.js"></script> <script src="js/bootstrap-tab.js"></script> <script src="js/bootstrap-tooltip.js"></script> <script src="js/bootstrap-popover.js"></script> <script src="js/bootstrap-button.js"></script> <script src="js/bootstrap-collapse.js"></script> <script src="js/bootstrap-carousel.js"></script> <script src="js/bootstrap-typeahead.js"></script> </body> </html> within style.css:
html, body { height: 100%;} body { font-family: 'montserrat'; font-weight: bold; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .navbar .brand { color: #232222; font-size: 25px; margin-right: 20%; } .navbar-inverse .navbar-inner { border: 0; box-shadow: none; } .navbar-inverse .brand { color: #232323; } .navbar-inverse .nav > li > a{ color: #232323; font-size: 15px; } .navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus { background-color: #fff; -webkit-box-shadow: none; box-shadow: none; } .maincontent { width: 100%; background-color: #6eb3d2; .container { padding-top: 2%; } } .title { padding-top: 5%; color: #313131; /* text color + color overlay */ font-family: "montserrat"; font-size: 41px; font-weight: bold; } .intro { width: 70%; padding-top: 5%; color: #232222; /* text color + color overlay */ font-family: "open sans", sans-serif; font-size: 16px; font-weight: normal; } .footer { background-color: #232323; height: 100%; width:100%; p { color: #fff; } } .register { margin-top: 6%; { padding: 10px; color: #f6f6f6; // text color + color overlay font-family: "montserrat"; font-size: 16px; font-weight: bold; width: 242px; height: 61px; background-color: #1f7f5b; /* layer fill content + color overlay */ } a:hover { text-decoration: none; background-color: #232323; } } edit: want .footer vertically expanded jsfiddle: http://jsfiddle.net/mckjb/
what browser support need?
if you’re ok with
- safari
- chrome
- firefox
- opera 12.1+
- ie10+
you can use flexbox trivially. issue is bit verbose there 3 syntax out in wild.
first remove margin , set html , body 100% height , width (firefox needs width set fix bug elements don't expand correctly):
html, body { height: 100%; width: 100%; /* needed fix firefox bug */ margin: 0; } next set body use flexbox rather regular box model. safari, older chrome, , firefox use old syntax. ie10 uses in-between syntax, , opera , modern chrome use new syntax (latter prefix):
body { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } next need make elements stacked vertically rather horizontally. again, various syntax. add these body selector:
-webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; now laid out vertically elements have default with. want header , footer not stretch can stay are. ,we want main contents stretch fill available space, need element flexible. in demo used article element, did following:
article { background-color: #6eb3d2; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } the value 1 means take 1 unit worth of space. no other item flexible, of space. if 3 elements used 1, available space sub-divided equally , added default size of elements.
the final result should this: http://jsfiddle.net/kf9tl/ (or http://jsfiddle.net/kf9tl/show full page preview).
is want?
Comments
Post a Comment