css - Bootstrap Full page columns -
i want have 2 columns fills every time full page size unattached given content.
the problem solutions work until began scroll page.
example
html,body { height: 100%; min-height: 100%; } .left-content { background: red; } .right-content { background: green; } .container-fluid { height: 100%; } .row { height: 100%; } [class^="col-"] { height: 100%; }
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-sm-6 left-content"> left column </div> <div class="col-sm-6 right-content"> right column </div> </div> </div>
anyone have solution problem?!
how adding col-xs-6 accommodates small screens well:
html,body { height: 100%; min-height: 100%; } .left-content { background: red; } .right-content { background: green; } .container-fluid { height: 100%; } .row { height: 100%; } [class^="col-"] { height: 100%; }
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-xs-6 left-content"> left column </div> <div class="col-md-6 col-xs-6 right-content"> right column </div> </div> </div>
Comments
Post a Comment