Evenly distribute available responsive height over vertically stacked li elements

Question

For responsiveness, I'm developing a website with bootstrap (1st time) and php. In the upper part of the page I want to use a row divided into 2 colums (col-sm-3 & 9), the wider one occupying an image carousel, the other one an unsorted list with 2 list elements, one image, one text. Now I want the elements to have the same height, i.e. 50% of the (responsive) height of the carousel image. The carousel image has a 100% width of the column, so when the display gets smaller, so will the height of the carousel. Thus the height of the list elements has to diminish accordingly.

<!-- Carousel Row -->
<div class="row" id="top">

  <!-- Sidebar -->
  <div class="col-sm-3 sidebar" id="sidebar">
    <ul class="nav navbar-nav-custom">
      <li class="logo">
        <img>
      </li>
      <li class="text">
        |
        |
      </li>
    </ul>
  </div>

  <!-- Carousel -->
  <div class="col-sm-9" id="carouselbar">
    <div id="carousel" class="carousel slide" data-ride="carousel">
      |
      |
    </div><!-- /.carousel -->
  </div>

</div>

I tried to find a solution myself but didn't succeed nor could I find a solution after a real extensive internet search. Could anyone help me out giving these list elements a responsive height, preferably CSS only.

Answer 1

EDITED after comments below.

You can get a responsive height by setting the height to 0 and adding padding-bottom as a percentage. You would need to adjust the acutal percentage depending on your aspect ratio.

You could then add the text inside as an absolutely positioned div with height: 100% and width 100%.

Here's a fiddle I had to use media queries to get the height to stay at 50%.

   <li class = 'text_holder'>
       <div id ='text'>
              My text here
       </div>
   </li>



      .text_holder {
     height: 0;
     padding-bottom: 85%;
     background-color: yellow;
    }
    #text {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     }

     @media (min-width: 992px) { 
     .logo {
     padding-bottom: 83%;
}
  .text_holder {
     padding-bottom: 83%;
    }
    }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) { 
          .logo {
     padding-bottom: 81%;
}
  .text_holder {
     padding-bottom: 81%;
    }
    }

For the image, you would just use the same method as the carousel, give it a percentage based width, and the height will scale accordingly.

Otherwise, you can adjust font-size to be smaller for lower res screens. You would need to adjust the following to suit your actual design.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
.text {
  font-size: 1.1em;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
 .text {
 font-size: .8em;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
 .text {
 font-size: .9em;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
 .text {
 font-size: 1em;
  }
}