CODEWITHSUNDEEP
htmlcss
Sprunkas
Sprunkas

Reputation: 433

Sidebar doesn't have the full height of the webpage

I have problem that my sidebar doesn't have the full height of the webpage. Trying to fix this problem for hours but can't... Can someone tell me how to fix that? 

body, html {
    height: 100%;
}

.navbar-inverse {
    	background-color: #455a64;
    	color: #f7f6f6;
    	vertical-align: middle;
    	height: 50px;
    	line-height: 50px;
    	font-size: 16px;
    }

    nav .col-sm-2 a {
    	color: #f7f6f6;
    	margin-left: 40%;
    }

    hr {
    	border-top: 1px solid #aaaaaa;
    }

    nav .col-sm-2 a:hover {
    	color: #ebebeb;
    	text-decoration: none;
    }

.container-fluid .row .col-sm-2 {
	margin-top: -30px;
	background-color: #455a64;
	height: 100%;
}

.navbar {
	margin-bottom: 0;
	border-bottom: 0;
}

.container-fluid .row .col-sm-2 a {
	color: #ebebeb;
	font-size: 16px;
}

.container-fluid .row .col-sm-2 a:hover {
	color: #26c6da;
	text-decoration: none;
}

    .active {
    	color: #26c6da!important;
    	text-decoration: none;
    }

    .glyphicon {
    	margin-bottom: 30px;
    	padding-right: 15px;
    }

    .glyphicon-menu-right {
    	float: right;
    }

    .glyphicon-menu-left {
    	float: right;
    }


    #panel {
    	margin-top: 20px;
    }
<!DOCTYPE html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Creator CRM</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="../css/admin.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
      </head>
      <body>
        <nav class="navbar navbar-inverse navbar-static-top"></nav>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-2">
              <hr>
              <a href="../index.html"><span class="glyphicon glyphicon-home"></span> Homepage <span class="glyphicon glyphicon-menu-right"></span></a><br>
              <a class="active" href="index.html"><span class="glyphicon glyphicon-lock"></span> Modules <span class="glyphicon glyphicon-menu-left"></span></a><br>
              <span class="title">Installed modules<hr></span>
              <a href="#"><span class="glyphicon glyphicon-th-list"></span> Users management <span class="glyphicon glyphicon-menu-right"></span></a><br>
            </div>
            <div class="col-sm-10">
              <div id="panel">
                <div class="panel panel-default">
                  <div class="panel-heading">Your current plan: <strong>Free</strong> <button class="btn btn-blue">Upgrade your plan to install more modules!</button></div>
                  <div class="panel-body">
 L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
      </body>
    </html>

Added my code above. For bigger screens there is chance that you can't see that bug. So I leave a picture here too:Bug with height

Thanks in advance for help!:)

P.S Open in full page to better see problem, because it's not implemented to smaller devices.

Upvotes: 0

Views: 39

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

You can use flex on the parent, and remove the height attribute from the sidebar because the height will "stretch" by default to match the height of the parent.

.flex {
  display: flex;
}

body,
html {
  height: 100%;
}

.navbar-inverse {
  background-color: #455a64;
  color: #f7f6f6;
  vertical-align: middle;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
}

nav .col-sm-2 a {
  color: #f7f6f6;
  margin-left: 40%;
}

hr {
  border-top: 1px solid #aaaaaa;
}

nav .col-sm-2 a:hover {
  color: #ebebeb;
  text-decoration: none;
}

.container-fluid .row .col-sm-2 {
  margin-top: -30px;
  background-color: #455a64;
}

.navbar {
  margin-bottom: 0;
  border-bottom: 0;
}

.container-fluid .row .col-sm-2 a {
  color: #ebebeb;
  font-size: 16px;
}

.container-fluid .row .col-sm-2 a:hover {
  color: #26c6da;
  text-decoration: none;
}

.active {
  color: #26c6da!important;
  text-decoration: none;
}

.glyphicon {
  margin-bottom: 30px;
  padding-right: 15px;
}

.glyphicon-menu-right {
  float: right;
}

.glyphicon-menu-left {
  float: right;
}

#panel {
  margin-top: 20px;
}
<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Creator CRM</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="../css/admin.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
</head>

<body>
  <nav class="navbar navbar-inverse navbar-static-top"></nav>
  <div class="container-fluid">
    <div class="row flex">
      <div class="col-sm-2">
        <hr>
        <a href="../index.html"><span class="glyphicon glyphicon-home"></span> Homepage <span class="glyphicon glyphicon-menu-right"></span></a><br>
        <a class="active" href="index.html"><span class="glyphicon glyphicon-lock"></span> Modules <span class="glyphicon glyphicon-menu-left"></span></a><br>
        <span class="title">Installed modules<hr></span>
        <a href="#"><span class="glyphicon glyphicon-th-list"></span> Users management <span class="glyphicon glyphicon-menu-right"></span></a><br>
      </div>
      <div class="col-sm-10">
        <div id="panel">
          <div class="panel panel-default">
            <div class="panel-heading">Your current plan: <strong>Free</strong> <button class="btn btn-blue">Upgrade your plan to install more modules!</button></div>
            <div class="panel-body">
             <div style="height: 200vh"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../js/jquery.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 1

Related Questions