I'm getting and strange problem that I can't figure out why my section tag and article cannot take whole available height place.Basically, I've a section and article that don't contain content, but have a div (.news) that is hidden and should be visible only when we click on UP's link.As I understand, the article and section tags are not getting height value, and I don't understand why.Here is the code that I'm using : Edit (Added the code)\[code\]<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Sticky footer · Twitter Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- CSS --> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> <!-- <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> --> <style type="text/css"> ?html,body{ height:100%}#wrap { min-height:100%; height:auto !import; height:100%; margin: 0 auto -60px; background-color:lightgray;}header { height:70px;}section { height:100%; min-height:100%;}article { position:relative; background-color:lightgreen; overflow:hidden; height:100%; min-height:100%;}article .news { width:100%; position:absolute; bottom:0; background-color:red;}#push, .footer { height:60px;}.footer { padding-top:35px; background-color:#a3a3a3;}? </style> </head> <body> <div id="wrap"> <header>Header</header> <section> <article> <div class="news row-fluid"> <div class="span12"><a href="http://stackoverflow.com/questions/13822464/#" class="btn">^</a></div> <div class="container"> <div class="span6">My News 1</div> <div class="span6">My News 2</div> </div> </div> </article> </section> <div id="push"></div></div><footer class="footer"> Footer</footer>? </body></html>\[/code\]I'm not using jsfiddle.net, because my problem doesn't appear there.
Make section and article taking whole height available place
- Thread starter Zethus
- Start date