title: achieving a responsive Height
body: <p>I am developing the front end for a new project of mine. And I am using a combination of custom CSS &amp; bootstrap to achieve a responsive interface. The width is currently responsive &amp; is resizing accordingly with the browser.</p>
  <p>I now need to achieve the same but for the <strong>HEIGHT</strong> specifically.  Having a bit of troubles &amp; running into a roadblock in doing this at the moment. Hopefully I may find some help here.</p>
  <p>The specific elements I am trying to target are the 'Features' &amp; 'Video-placeholder' elements on the page.  I would like to set it's height to expand with the page's size, so all elements on the interface remain proportional regardless of the browsers size.</p>
  <p>See the design here on codepen: <a href="https://codepen.io/username-reserved/pen/jOYOxBg" rel="nofollow noreferrer">Interface design</a></p>
  <p>Code here as well:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>main &gt; .container {
    padding: 60px 15px 0;
  }
  
  * {
    margin: 0;
    padding: 0;
  }
  
  html {
  margin: 0;
  padding: 0;
  }
  
  body {
    background-color: #F8F8F8 !important;
  }
  
  nav {
    height: 85px;
    background-color: #FFF !important;
    border-bottom: solid 1px #DDD;
    box-shadow: 1px 1px #ececec;
    padding: 0px 110px 0px 94px !important;
  }
  
  
  input  /* Hidden file input */
  {
  opacity:0.0;
  filter: alpha(opacity=0);
  display: none;
  }
  
  button {
    background: transparent;
    border: transparent;
  }
   
  #upld-button {
      color: #FFF;
      background-color: #B02BF4;
      border-color: #B02BF4;
      border-radius: 5em;
      padding: 10px 29px 14px 29px;
      text-decoration: none;
      font-weight: 600;
      margin: -16px;
  }
  
  #upld-button:hover {
    background: #9E41CE !important;
  }
  
  main {
    overflow: scroll;
  }
  
  #mid-section {
    margin: 126px 5% 2% 5%;
    max-width: 100%;
    display: flex;
  }
  
  #features {
    background-color: #FFF;
    width: 29%;
    border-radius: 6px;
  }
  
  #files-dropdown {
      width: 100%;
      height: 55px;
      margin: 0;
      padding: 14px;
      background-color: #B02BF4;
      text-align: center;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
  }
  
  #files-dropdown:hover {
    background: #9E41CE;
    cursor: pointer;
  }
  
  ul {
    padding: 16px 40px 15px;
    list-style-type: none;
    
  }
  
  li {
    padding: 36px 0 0 0;
  }
  
  ul li a {
    text-decoration: none;
    color: #767575;
  }
  
  ul li a:hover {
    color: #000;
  }
  
  #video-placeholder {
    min-width: 70%;
    height: 465px;
    background-color: #DDD;
    border-radius: 6px;
    margin-left: 4%;
  }
  
  #video-controls-container {
    float: right;
    margin: 0px 310px 26px 6px;
    padding: 0px;
  }
  
  button.controls {
    color: #414040;
    background-color: transparent;
    border: solid 1px #B02BF4;
    border-radius: 5em;
    margin: 0 6px 0px 0px;
    padding: 6px 26px;
  }
  
  button.controls:hover {
    color: #FFF;
    background-color: #B02BF4;
    border: solid 1px #B02BF4;
  }
  
  footer {
    background-color: #FFF;
    height: 79px;
    border-top: solid 1px #DDD;
    box-shadow: 0px 0px 1px 1px #ECECEC;
    padding: 0px 61px 0px 61px;
  }
  
  #scrub-bar-container {
    margin: 0;
    padding: 19px 46px 29px 46px;
  }
  
  #play-button {
    background: #B02BF4 !important;
    border-color: #B02BF4 !important;
    color: #FFF !important;
  }
  
  #play-button:hover {
    background-color: #AA00FFA9 !important;
  }
  
  #scrub-bar { 
    background:#F4F4F4;
    margin: 0px 35px 0px 35px;
    padding: 0px 440px 9px 675px;
    display: inline;
    border-radius: 6px;
    height: 26px;
  }
  
  #placeholder {
    color: #FFF;
    background-color: #B02BF4;
    border-color: #B02BF4;
    border-radius: 5em;
    padding: 6px 29px 10px 29px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
  }
  
  #placeholder:hover {
    background-color: #AA00FFA9 !important;
  }
  
  ::-webkit-scrollbar {
    width: 6px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #B02BF4;
    width: 6px;
    border-radius: 6px;
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang = "en" class = "h-100"&gt;
    &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;meta name = "viewport" content = "width=device-width, initial-scale=1"&gt;
      &lt;meta name = "description" content = ""&gt;
      &lt;meta name = "author" content = "author"&gt;
      &lt;title&gt;Interface&lt;/title&gt;
  
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"&gt;
  
    &lt;/head&gt;
    &lt;body class = ""&gt;
      
  &lt;header&gt;
    
    &lt;nav class = "navbar navbar-expand fixed-top"&gt;
      &lt;div class = "container-fluid"&gt;
        &lt;a class = "navbar-brand" href = "#" style = "padding-top: 0px;"&gt;logo&lt;/a&gt;
  
        &lt;/button&gt;
        &lt;div class = "collapse navbar-collapse" id = "navbarCollapse"&gt;
          &lt;span class = "navbar-nav me-auto mb-2 mb-md-0"&gt;
          &lt;/span&gt;
          &lt;form class = "d-flex"&gt;
            &lt;button id = "upld-button" onclick = "document.getElementById('file-input').click()"&gt;&lt;input id = "file-input" type = "file" name = "file-upld" &gt;UPLOAD&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  
  
  &lt;main class = "flex-shrink-0"&gt;
    &lt;div id = "mid-section"&gt;
      &lt;div id = "features"&gt;
        &lt;div id = "files-dropdown"&gt;&lt;span style="color: #FFF;"&gt;File(s)&lt;/span&gt;&lt;/div&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href = "#"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16"&gt;
            &lt;path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/&gt;
            &lt;path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/&gt;
          &lt;/svg&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "#"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-slash-square" viewBox="0 0 16 16"&gt;
            &lt;path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/&gt;
            &lt;path d="M11.354 4.646a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708l6-6a.5.5 0 0 1 .708 0z"/&gt;
          &lt;/svg&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "#"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"&gt;
            &lt;path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/&gt;
            &lt;path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/&gt;
          &lt;/svg&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "#"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-chat-right-text" viewBox="0 0 16 16"&gt;
            &lt;path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/&gt;
            &lt;path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/&gt;
          &lt;/svg&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "#"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-sticky" viewBox="0 0 16 16"&gt;
            &lt;path d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 15 8.586V2.5A1.5 1.5 0 0 0 13.5 1h-11zM2 2.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V8H9.5A1.5 1.5 0 0 0 8 9.5V14H2.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V9.5a.5.5 0 0 1 .5-.5h4.293L9 13.793z"/&gt;
          &lt;/svg&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href = "#"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16"&gt;
            &lt;path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/&gt;
          &lt;/svg&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;/div&gt;
      &lt;span id = "video-placeholder"&gt;
        
      &lt;/span&gt;
      &lt;/div&gt;
  
      &lt;!--&lt;div id = "video-controls-container"&gt;
        &lt;button class = "controls"&gt;Skip backwards&lt;/button&gt; &lt;button class = "controls"&gt;skip forwards&lt;/button&gt; &lt;button class = "controls"&gt;Control&lt;/button&gt; &lt;button class = "controls"&gt;Control&lt;/button&gt;
        &lt;/div&gt;--&gt;
  &lt;/main&gt;
  
  
  &lt;footer class = "navbar navbar-expand fixed-bottom"&gt;
    &lt;div class = "container-fluid"&gt;
      &lt;button type = "button" class = "btn btn-outline-primary" id = "play-button"&gt;Play video&lt;/button&gt;
  
      &lt;div class = "collapse navbar-collapse" id = "navbarCollapse"&gt;
        &lt;span class = "navbar-nav me-auto mb-2 mb-md-0" id = ""&gt;
          &lt;!--&lt;div id = "scrub-bar"&gt;
          &lt;/div&gt;--&gt;
        &lt;/span&gt;
        &lt;form class = "d-flex"&gt;
          &lt;button id = "placeholder"&gt;Trim&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/footer&gt;
  
      &lt;script src = "Interface/javascript/bootstrap/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks in advance for reading!</p>