CODEWITHSUNDEEP
htmlcssflexbox
Moshe
Moshe

Reputation: 5159

Flex container to take whole height

I have a flex container that comes after another flex container, first one is navigation bar and the second is the page content.

I tried making the content take the whole height of the page, and found only one thing to work which is setting container's height to 100vh.

But then I faced a problem where I need to subtract from the viewport, the height of the navigation.

/* Mixins Definitions */
/* Actual CSS */
.navbar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.81);
  font-size: 14px;
  -webkit-flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: stretch;
  list-style: none;
}
.navbar li {
  margin: 0;
  line-height: 3.2em;
  display: block;
}
.navbar li i {
  margin-right: 10px;
}
.navbar li a {
  color: #9d9d9d;
  text-decoration: none;
  padding: 15px;
  margin: 0;
}
.navbar li a:hover {
  color: #FFFFFF;
}
.navbar li:first-child {
  margin-right: auto;
}
.navbar li:first-child a {
  font-size: 20px;
}
@media all {
}
@media all and (max-width: 600px) {
  .navbar {
    justify-content: space-around;
  }
  .navbar li:first-child {
    display: none;
  }
}
.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
}
.container .sidebar {
  width: 16.5%;
  border-right: 1px solid #ee0005;
}
.container .sidebar .navigation {
  padding: 0;
  list-style: none;
}
.container .sidebar .navigation a {
  padding: 10px 15px 10px 20px;
  text-decoration: none;
  display: inline-block;
  color: #337ab7;
  width: 100%;
}
.container .sidebar .navigation a:hover {
  background-color: #EEEEEE;
}
.container .sidebar .navigation .active > a {
  background-color: #428bca;
  color: #FFFFFF;
}
.container .content {
  flex: 1;
  height: 100%;
  padding: 30px;
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  background-color: #f8f8f8;
  margin: 0;
  min-height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<ul class="navbar">
    <li><a href="#">Company</a></li>
    <li><a href="#"><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</a></li>
    <li><a href="#">Dashboard</a></li>
</ul>
<div class="container">
    <div class="sidebar">
        <ul class="navigation">
            <li><a href="/dashboard">Dashboard</a></li>
            <li class="active"><a href="/hosts">Hosts <span class="sr-only">(current)</span></a></li>
            <li><a href="/trusers">Users</a></li>
        </ul>
    </div>
    <div class="content">Content</div>
</div>
</body>

https://jsfiddle.net/0xj1v8mw/1/

Upvotes: 2

Views: 3100

Answers (3)

VXp
VXp

Reputation: 12118

Added height: 100% to the html, body and .container elements:

/* Mixins Definitions */
/* Actual CSS */
html, body {
  height: 100%;
}
.navbar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.81);
  font-size: 14px;
  -webkit-flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: stretch;
  list-style: none;
}
.navbar li {
  margin: 0;
  line-height: 3.2em;
  display: block;
}
.navbar li i {
  margin-right: 10px;
}
.navbar li a {
  color: #9d9d9d;
  text-decoration: none;
  padding: 15px;
  margin: 0;
}
.navbar li a:hover {
  color: #FFFFFF;
}
.navbar li:first-child {
  margin-right: auto;
}
.navbar li:first-child a {
  font-size: 20px;
}
@media all {
}
@media all and (max-width: 600px) {
  .navbar {
    justify-content: space-around;
  }
  .navbar li:first-child {
    display: none;
  }
}
.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
}
.container .sidebar {
  width: 16.5%;
  border-right: 1px solid #ee0005;
}
.container .sidebar .navigation {
  padding: 0;
  list-style: none;
}
.container .sidebar .navigation a {
  padding: 10px 15px 10px 20px;
  text-decoration: none;
  display: inline-block;
  color: #337ab7;
  width: 100%;
}
.container .sidebar .navigation a:hover {
  background-color: #EEEEEE;
}
.container .sidebar .navigation .active > a {
  background-color: #428bca;
  color: #FFFFFF;
}
.container .content {
  flex: 1;
  height: 100%;
  padding: 30px;
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  background-color: #f8f8f8;
  margin: 0;
  min-height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}
<body>
<ul class="navbar">
    <li><a href="#">Company</a></li>
    <li><a href="#"><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</a></li>
    <li><a href="#">Dashboard</a></li>
</ul>
<div class="container">
    <div class="sidebar">
        <ul class="navigation">
            <li><a href="/dashboard">Dashboard</a></li>
            <li class="active"><a href="/hosts">Hosts <span class="sr-only">(current)</span></a></li>
            <li><a href="/trusers">Users</a></li>
        </ul>
    </div>
    <div class="content">sdfsd</div>
</div>
</body>

Upvotes: 1

Satheesh Kumar
Satheesh Kumar

Reputation: 2293

For container class just use height: calc(100vh - 46px);.

Where I saw your navigation bar height is 46px from your given demo.

Upvotes: -1

sol
sol

Reputation: 22959

You can set height on the body, instead of .container, and add some additional flex rules:

fiddle

/* Mixins Definitions */


/* Actual CSS */

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.navbar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.81);
  font-size: 14px;
  -webkit-flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: stretch;
  list-style: none;
}

.navbar li {
  margin: 0;
  line-height: 3.2em;
  display: block;
}

.navbar li i {
  margin-right: 10px;
}

.navbar li a {
  color: #9d9d9d;
  text-decoration: none;
  padding: 15px;
  margin: 0;
}

.navbar li a:hover {
  color: #FFFFFF;
}

.navbar li:first-child {
  margin-right: auto;
}

.navbar li:first-child a {
  font-size: 20px;
}

@media all {}

@media all and (max-width: 600px) {
  .navbar {
    justify-content: space-around;
  }
  .navbar li:first-child {
    display: none;
  }
}

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  padding: 0;
  flex: 1;
}

.container .sidebar {
  width: 16.5%;
  border-right: 1px solid #ee0005;
}

.container .sidebar .navigation {
  padding: 0;
  list-style: none;
}

.container .sidebar .navigation a {
  padding: 10px 15px 10px 20px;
  text-decoration: none;
  display: inline-block;
  color: #337ab7;
  width: 100%;
}

.container .sidebar .navigation a:hover {
  background-color: #EEEEEE;
}

.container .sidebar .navigation .active>a {
  background-color: #428bca;
  color: #FFFFFF;
}

.container .content {
  flex: 1;
  height: 100%;
  padding: 30px;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  background-color: #f8f8f8;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}
<body>
  <ul class="navbar">
    <li><a href="#">Company</a></li>
    <li><a href="#"><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</a></li>
    <li><a href="#">Dashboard</a></li>
  </ul>
  <div class="container">
    <div class="sidebar">
      <ul class="navigation">
        <li><a href="/dashboard">Dashboard</a></li>
        <li class="active"><a href="/hosts">Hosts <span class="sr-only">(current)</span></a></li>
        <li><a href="/trusers">Users</a></li>
      </ul>
    </div>
    <div class="content">sdfsd</div>
  </div>
</body>

Upvotes: 2

Related Questions