Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jeriah Bowers
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points
Posted by Jeriah Bowers
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points

Can't get side nav full height of it's container

Hi, I'm currently having my struggle trying to get my side nav at the desktop breakpoint the full height of the body/html tags I feel like the problem might be in the way I'm approaching styling them. Any help is greatly appreciated.

HTML

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="css/toggle-switch.css">
   <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
   <link rel="stylesheet" href="css/main.css">
   <title>Dashboard</title>
</head>
<body>
<header>
    <h2><b>Your</b>App&trade;</h2>
    <div id="right">
    <img id="bell" src="icons/icon-bell.svg" alt="Bell Icon">
    <img id="jeriah" src="jeriah.jpg" alt="Jeriah Golf"  width="50" height="50">
      <h4>Jeriah Bowers</h4>
    </div>
</header>
 <nav>
   <ul>
   <li><img src="icons/icon-dashboard.svg" alt="Dashboard Icon" width="25"><p>Dashboard</p></li>
   <li><img src="icons/icon-members.svg" alt="Dashboard Icon" width="25"><p>Members</p></li>
     <li><img src="icons/icon-visits.svg" alt="Dashboard Icon" width="25"><p>Visits</p></li>
   <li><img src="icons/icon-settings.svg" alt="Dashboard Icon" width="25"><p>Settings</p></li>
  </ul>
 </nav>
<div id="bodyy">
  <div id="searchDash">
    <h1 id="dashboard">Dashboard</h1>  
    <input type="search" placeholder="Search">
  </div>
<div id="alert"><p><b>Alert</b> May the force be with us all!!</p><img src="images/x.jpg" alt="Exit Button" width="20"></div>
 <div id="canvasDiv">
     <div id="lineDiv">
        <div id="flexOpt">
         <h3>Traffic</h3>
           <ul>
             <li>Hourly</li>
             <li>Daily</li>
             <li>Weekly</li>
             <li>Monthly</li>
          </ul>
        </div>
         <canvas id="lineChart" height="150" width="300"></canvas>
      </div> <!--End Line Chart Div-->

    <h3>Daily Traffic</h3>     
     <div id="doubleDiv">
         <canvas id="barChart" height="150" width="250"></canvas>
         <h3>Mobile Users</h3>
         <canvas id="doughnutChart" height="150" width="250"></canvas>
     </div> <!--End Double Div-->
 </div> <!--End Canvas Div--> 

<h1>Social Stats</h1>
 <div id="socialDiv">
    <div class="socials" id="twitterDiv">
        <div class="circle"><img class="icons" src="icons/icon-twitter.svg" alt="Twitter Icon"></div> <!--Circle Div End-->
        <div class="right"><h3>Twitter</h3>
        <h2>8, 765</h2></div>
    </div>

    <div class="socials" id="facebookDiv">
        <div class="circle" id="facebook"><img class="icons" src="icons/icon-facebook.svg" alt="Facebook Icon"></div>
        <div class="right"><h3>Facebook</h3>
        <h2>10, 345</h2></div>
    </div>

    <div class="socials" id="googleDiv">
        <div class="circle"><img class="icons" src="icons/icon-google-plus.svg" alt="Google Plus Icon"></div>
        <div class="right"><h3>Google+</h3>
        <h2>2, 530</h2></div>
    </div>
 </div> <!--End Social Outer Div-->    

<h1>New Members</h1>
 <div id="newMembers">
  <ul>
      <li><img class="images" src="images/justus.jpg" alt="Guy holding Golf Club"><div class="why"><div class="nameEmail"><h3>Justus Harless</h3><a href="#"><p>justusharless@yahoo.com</p></a></div><span class="date">9/3/2017</span></div></li>
    <li><img class="images" src="images/basketball.jpg" alt="Guy Holding Basketball"><div class="why"><div class="nameEmail"><h3>Jake Dehlomme</h3><a href="#"><p>jakedehlomme@yahoo.com</p></a></div><span class="date">9/2/2017</span></div></li>
      <li><img class="images" src="images/golf.jpg" alt="Guy Swinging Club"><div class="why"><div class="nameEmail"><h3>Steve Smith</h3><a href="#"><p>stevesmith@yahoo.com</p></a></div><span class="date">8/29/2017</span></div></li>
      <li><img class="images" src="images/class.jpg" alt="Guys with Swag"><div class="why"><div class="nameEmail"><h3>Jeshuah Bowers</h3><a href="#"><p>jeshuahbowers03@yahoo.com</p></a></div><span class="date">8/8/2017</span></div></li>
  </ul>
</div>

<h1>Recent Activity</h1>
<div id="recentActivity">
  <ul>
   <li><img class="images" src="images/justus.jpg" alt="Guy holding Golf Club"><div class="stacked"><p>Justus Harless commented on your Facebook post.</p><span>2 Hours Ago</span></div></li>
   <li><img class="images" src="images/basketball.jpg" alt="Guy Holding Basketball"><div class="stacked"><p>Jake Dehlomme started following you on Twitter.</p><span>5 Hours Ago</span></div></li>
   <li><img class="images" src="images/golf.jpg" alt="Guy Swinging Club"><div class="stacked"><p>Steve Smith recently watched your video on Youtube.</p><span>9 Hours Ago</span></div></li>
   <li><img class="images" src="images/class.jpg" alt="Guys with Swag"><div class="stacked"><p>Jeshuah Bowers is your slave.</p><span>1 Day Ago</span></div></li>
  </ul>
</div>
<div id="settingsMessage">
 <h1>Message User</h1>
  <div id="message">
     <input type="text" placeholder="Search for User">
     <textarea placeholder="Message for User"></textarea>
     <button type="submit">Send</button>
  </div> <!--Message Div-Styles--> 
    <div id="settings">
       <h1>Settings</h1> 
<div id="toggleDiv">
  <label class="switch-light switch-ios" onclick="">
  <input type="checkbox">

  <strong>
    Send Email Notifications
  </strong>

  <span>
    <span>Off</span>
    <span>On</span>
    <a></a>
  </span>
 </label>

 <label class="switch-light switch-ios" onclick="">
  <input type="checkbox">

  <strong>
    Set Profile to Public
  </strong>

  <span>
    <span>Off</span>
    <span>On</span>
    <a></a>
  </span>
 </label>
</div> <!--End Toggle Div-->
  <select>
      <option>Select Timezone</option>
      <option>Eastern Standard Time(EST)</option>
      <option>Central Standard Time(CST)</option>
      <option>Mountain Standard Time(MST)</option>
      <option>Pacific Standard Time(PST)</option>
  </select>
<div id="buttons">
 <button id="save" type="submit">Save</button>
 <button id="cancel" type="submit">Cancel</button>
</div> <!--Button Div-->
    </div> <!--Settings Div-->
</div> <!--Outer Div-->   
    </div> <!--#bodyy Div-->
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<script src="js/chart.js"></script>
<script src="js/main.js"></script>
  </body>
</html>

CSS

html {
    height: 100%;
    margin: 0;
}

li {
    list-style: none;
}

body {
    margin: 0;
    background-color: #fdfcfd;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
}

a {
    text-decoration: none;
}

input {
    height: 20px;
}

h1 {
  font-size: 1.3em;
  color: grey;
  margin-left: 1.5em;
}

h3 {
   font-size: 1.2em;
   color: grey;
}

/*Header-Styles*/

header {
    display: flex;
    align-items: center;
    background-color: #635889;
    justify-content: space-between;
}

header h2 {
    font-weight: normal;
    margin-left: 10px;
    color: white;
}

header h4 {
    margin-right: 10px;
    color: white;
}

#jeriah {
    border-radius: 50%;
    margin-right: 10px;
}

#bell {
    height: 40px;
    width: 40px;
    margin-right: 15px;
    padding-right: 10px;
    border-right: 2px solid #644ca4;
    width: 30px;
}

#right {
    display: flex;
    align-items: center;
}

/*Chart-Styles*/

#canvasDiv {
   display: flex;
   flex-direction: column;
   width: 95%;
   margin: auto;
}

canvas {
    max-width: 95%;
    margin: auto;
}

/*Icon-Styles*/

.icons {
    width: 40px;
    margin-right: 1em;
}


.right {
    margin-left: 1em;
}


/*SearchBar-Styles*/

#searchDash {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e7e4e7;
    height: 50px;
}

#dashboard {
    background-color: white;
    color: #a6a6a6;
    padding: 11px 12px 11px 12px;
    font-size: 1.3em;
    margin-left: 0;
} 

input {
    margin-right: 12px;
    display: block;
    width: 35%;
}

/*Chart.js-Styles*/

#flexOpt {
    display: flex;
    justify-content: space-between;
}

#flexOpt h3 {
    margin-left: 10px;
}

#flexOpt ul {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

#flexOpt li {
   margin-right: 8px;
   padding: 8px 10px;
   border-radius: 20px;
   color: grey;
}

#flexOpt li:hover {
    background-color: #88cc00;
    color: white;
    cursor: pointer;
}

/*Social Div-Styles*/

#socialDiv {
   display: flex;
   flex-direction: column;
}


.socials {
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
    border: 1px #d9d9d9 solid;
    border-radius: 3px;
    width: 95%;
    margin: auto;
    margin-bottom: .8em;
}

.circle {
    background-color: #635889;
    border-radius: 50%;
    height: 75px;
    width: 75px;
    display: flex;
}

.circle img {
    margin-left: 1.2em;
    margin-top: .5em;
}

#facebook img {
   margin-bottom: .6em; 
}

/*Person Data-Styles*/

.images {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

#newMembers ul {
    display: flex;
    flex-direction: column;
}

#newMembers li {
    display: flex;
    align-items: center;
}

.nameEmail {
    display: flex;
    flex-direction: column;
    margin-left: 1em;
}

.nameEmail h3 {
    margin-bottom: 2px;
}

.nameEmail p {
    margin-top: 2px;
}

.why {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
}

#recentActivity {
    display: flex;
    flex-direction: column;
}

#recentActivity li {
    display: flex;
    align-items: center;
    margin-bottom: 1.2em;
}

.stacked {
    display: flex;
    flex-direction: column;
    margin-left: 1em;
}

.stacked span {
    margin-top: -10px;
}


/*Settings/Message Div-Styles*/

#message {
    display: flex;
    flex-direction: column;
}

#message input, button, textarea {
    margin: auto;
    margin-bottom: .8em;
    border-radius: 5px;
    border: 1px #d9d9d9 solid;
    width: 90%;
    height: 3em;
    font-size: .9em;
    background-color: #f2f2f2;
}

#message button {
    color: white;
    background-color: #635889;
}

#message textarea {
    height: 7em;
}

#settings {
    display: flex;
    flex-direction: column;
}

#settings select {
    width: 90%;
    margin-bottom: .8em;
    height: 3em;
}

select {
    align-self: center;
}

.switch-light span {
    max-width: 20%;
    float: right;
}

#toggleDiv {
    width: 90%;
    margin: auto;
    margin-bottom: 1.3em;
}

label {
    display: inline;
}

#toggleDiv label {
   margin-bottom: 1em;

}

/*Settings Button-Styles*/

#buttons {
    display: flex;
    width: 100%%;
}

#buttons button {
    width: 40%;
    color: white;
}

#cancel {
    background-color: #a6a6a6;
}

#save {
    background-color: #635889;
}

/*Popup Div-Styles*/

#alert {
    width: 90%;
    margin: auto;
    background-color: #635889;
    color: white;
    border-radius: 5px;
    margin-top: 10px;
}

#alert b {
    font-size: 18px;
}

#alert p {
    display: inline-block;
    margin-left: 10px; 
}

#alert img {
    float: right;
    margin-top: 19px;
    margin-right: 7px;
}

#alert img:hover {
    cursor: pointer;
}

nav {
    width: 95%;
    margin: auto;
    margin-top: 6px;
}

nav li {
    text-align: center;
    background-color: #453e60;
    border-radius: 5px;
    color: white;
}

nav img {
    margin-top: 2px;
}


/*BreakPoints*/

@media (min-width: 768px) {
    nav {
        display: flex;
        background-color: #453e60;
        width: 100%;
        margin-top: 0;
        justify-content: space-around;
    }

    nav ul {
        display: flex;
    }

    nav li {
        width: 10em;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0;
    }

    nav li:hover {
        border-bottom: #88cc00 3px solid;
        cursor: pointer;
    }

    nav p {
        margin-left: 5px;
    }
}

@media (min-width: 1024px) {
    #bodyy {
        width: 95%;
        float: right;
        height: 100%;
    }

    nav ul {
        flex-direction: column;
        margin-top: 0;
    }

    nav {
        flex-direction: column;
        width: 5%;
        float: left;
        background-color: #453e60;
        justify-content: flex-start;
        position: absolute;
        height: 100%;
    }

    nav li {
        width: 50%;
        margin: 30px auto 0;
        margin-left: -17px;
    }

    nav li:hover {
        cursor: pointer;
        border-bottom: none;;
    }

    nav p {
        display: none;
    }
}