css - Bootstrap Div height keeps going by content size -
i'm trying create website twitter bootstrap, single, vertically centered column on top of background container div (so can color / image background on edges).
i maintain having issue can background div fill come in screen, centered column div sets height size of content. want always, @ least, tall screen size. thought min-height this, not.
here's looks right now: (it's test page layout)
here code it:
html
<!doctype html> <html lang="en"> <head> <title>baileysaurus -- dinosaurs && logic in face!</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"> <link href="header.css" rel="stylesheet" type="text/css"> <link href="forum.css" rel="stylesheet" type="text/css"> <!-- jquery (bootstrap requires jquery!) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- bootstrap --> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- file of php utility functions --> <?php include 'functions.php'; ?> </head> <body> <!-- bootstrap --> <script src="bootstrap/js/bootstrap.min.js"></script> <div id='background' class='row-fluid'> <div class='span12'> <div id='site-column' class='row-fluid span10 offset1 column-wrap'> <img src="/pipedog.jpg" alt="argument invalid" /> <hr> <p> set blog here! </p> </div> <!-- end of outermost span12 div --> </div> <!-- end - "site-column" div --> </div> <!-- end - "background" div --> </body> </html> css
html, body { height: 100%; margin: 0; } #background { position: absolute; top:0; bottom: 0; min-height: 100%; min-width: 100%; background-color: gainsboro; } #site-column { top: 0; bottom: 0; min-height: 100%; border-left: 2px solid; border-right: 2px solid; background-color: white; } .column-wrap { overflow: hidden; } i'm trying white column in photo stretch bottom of screen, @ least, if content not long. have ideas on i'm missing?
you should able add together next css:
.span12 { height:100%; } css html5 twitter-bootstrap positioning
No comments:
Post a Comment