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

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

Enable autocomplete or intellisense in Atom editor for PHP -