CODEWITHSUNDEEP
csstwitter-bootstrap
Greycon
Greycon

Reputation: 789

Can't get css height to propogate to Bootstrap row

I am trying to setup a 3 panel HTML view. (Full-height Treeview left, Editor and Status stacked to the right.) I can get it to work no problem in vanilla CSS, but I've spend a day at it in Bootstrap 4. I've followed much of the advice on here, but no joy. My left column stays small. I will paste my HTML and CSS below, and a screen shot of the failed result. Any help appreciated - I think I am getting too old for this :-)

html, body {
    height: 100%;
  }

  .body {
    display: table;
    background-color: green;
}

  
  .min-100 {
      min-height: 100%;
  }
<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  
    <link rel="stylesheet" href="css/cc.css">
  </head>

  <div class="container-fluid min-100">
      <div class="row min-100">
        <clientArea class="col-sm-3 flex-grow-1 min-100" style="background-color: lightgray; border:1px solid">
          <h1>Client Treeview area</h1>
          <p>This will contain a list of Clients, Premises, Zones and Sensors</p>
        </clientArea>
        <editArea class="col-sm-9" style="background-color: white; border:1px solid">
          <h1>Editor area</h1>
        </editArea>
        <statusArea class="col-sm-9 offset-3" style="background-color: lightgray; border:1px solid">
          <h1>Status area</h1>
        </statusArea>
      </div>
  </div>

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 1

Views: 30

Answers (1)

johannchopin
johannchopin

Reputation: 14844

To fit to the bootstrap logic your editor and status area need to be in the same col. The use of vh unit make the element fit the full height of your screen. Try this example on full page:

html,
body {
  height: 100vh;
}

.body {
  display: table;
  background-color: green;
}

.vh-100 {
  height: 100vh;
}

.min-100 {
  min-height: 100%;
}
<!doctype html>
<html lang="en">

  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/cc.css">
  </head>

  <div class="container-fluid min-100">
    <div class="row min-100">
      <clientArea class="col-sm-3 vh-100 flex-grow-1 min-100" style="background-color: lightgray; border:1px solid">
        <h1>Client Treeview area</h1>
        <p>This will contain a list of Clients, Premises, Zones and Sensors</p>
      </clientArea>

      <section class="col-sm-9 vh-100">
        <editArea class="" style="background-color: white; border:1px solid">
          <h1>Editor area</h1>
        </editArea>
        <statusArea class="" style="background-color: lightgray; border:1px solid">
          <h1>Status area</h1>
        </statusArea>
      </section>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

</html>

Upvotes: 1

Related Questions