Height of row in bootstrap using percentage (%)

Navigation
0

How do I change the height of row in Bootstrap using percentage? I tried the height property in both CSS , and pure HTML , and did not work.

In a nutshell, I want to have control over the height of the row .

In the Height property, I noticed that if I enter value in pixel ( px ) it works, but I would like to use percentage (% ) , but using a percentage, the property is not recognized 

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Bill Turner</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="css/estilo.css" rel="stylesheet" media="screen">  
    </head>   
    <style>
        .c{
            height: 50%;
            background-color:aquamarine;
        }
    </style>
    <body>
        <div class="container">

            <div class="row" height="50%">
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>

            </div>
        </div>
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/main.js"></script> 
    </body>
</html>

    
asked by anonymous 26.10.2017 / 17:20

2 answers

1

First let's understand why !important does not work in this case.

The default size of the HTML document and your body ) is auto , this size changes as the elements are inserted into them, automatic size. 

console.log('Tamanho inicial: ' + $("body").height() + 'px');
console.log("Após 3 segundos ira criar um elemento.");

setTimeout(function() {
  var novoElemento = $("<div></div>").text("O tamanho do corpo mudou, confira o Log");
  $("body").append(novoElemento);
  console.log('Tamanho alterado para: ' + $("body").height() + 'px');
  console.log("Após 6 segundos ira criar outro elemento.");
  
  setTimeout(function() {
    var novoElemento = $("<div></div>").text("O tamanho do corpo mudou novamente, confira o Log");
    $("body").append(novoElemento);
    console.log('Tamanho alterado para: ' + $("body").height() + 'px');
  }, 6000);
  
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  

Toworkwithpercentageyoushoulddothefollowing.

  • DefinetheHTML

    html{height:100%;}

  • SettheBodysizeandthe.container

    body,.container{height:100%;}

  • Setselectorsize.row

    .row{height:50%;}

    • Seeworking

    html {
  height: 100%;
}
body, .container {
  height: 100%;
}

.row {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  height: 48%;
}
    <script src="https://code.jquery.com/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><divclass="container">
  <div class="row">
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
  </div>
  <div class="row">
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
    <div class="c col-lg-3 col-md-3 col-sm-3 col-3">esp</div>
  </div>
</div>
        
    26.10.2017 / 23:57
    1

    You should change the value of line-height: I put 2.0 but you need to adjust it in custom css (custom.css I refer to your css file) and insert the !important attribute so that it subscribes to the bootstrap . 

    .c{
                        background-color:aquamarine;
                        line-height:2.0 !important;
        }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">

            <div class="row" height="50%">
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>

            </div>
            <div class="row" height="50%">
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>
                <div class="c col-lg-3 col-md-3 col-sm-3 col-3">
                    esp
                </div>

            </div>
        </div>
        
    26.10.2017 / 20:22
    Access Site By Loggin Trigger to update stock