Sidebar

In this example below you will see how to do a Sidebar with some HTML / CSS and Javascript

Trying to get a side bar to stay full height

Thumbnail
This awesome code was written by ghyde03, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ghyde03 ©
  • HTML
  • CSS
  • JavaScript
    <div class="kuhn-container">
  <div class="kuhn-row">
    <div class="kuhn-left">
      <ul>
        <li>Sidebar</li>
        <li>Deleniti</li>
        <li>...</li>
      </ul>
    </div>
    <div class="kuhn-center">
      <p>Some content here...</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore officia deserunt, neque mollitia tempore eius dicta quasi cum id ullam. Quo facere, culpa est similique dolor dolores necessitatibus accusantium at.</p>
      <p>Excepturi eligendi fuga mollitia, esse nostrum labore obcaecati quidem. Sapiente ad, itaque velit. Corporis reiciendis beatae, ratione, autem sit adipisci ut sint aut magnam nihil pariatur officia animi ad dolorem!</p>
      <p>Rem, dolore voluptatem inventore sit ducimus distinctio minima repellendus doloribus itaque mollitia magni tempora magnam! Quam cumque, quisquam voluptatum soluta ab voluptatibus aspernatur, neque, nulla quae illo veritatis cum. Neque?</p>
      <p>Repudiandae temporibus minima voluptatum, excepturi necessitatibus deserunt, iusto sequi, provident fuga veniam unde voluptatem quidem placeat maiores rerum est labore id amet odio? Quidem pariatur esse earum laudantium dolorum repudiandae.</p>
      <p>Quos, commodi officiis quidem esse sapiente quas dolor aspernatur enim voluptatum optio veritatis eveniet ipsam vero doloribus blanditiis consequatur fugit ea, ratione eius, corporis sint! Cum similique atque, dolorum reiciendis.</p>
      <p>Commodi nesciunt rem odio asperiores quasi sapiente repudiandae illo unde assumenda, dicta laudantium ea nisi labore sequi harum hic dolor facere doloremque similique, quia nobis tempora optio necessitatibus? Placeat, odit.</p>
      <p>Nisi voluptates cum ad, explicabo sint ipsum tempora, delectus soluta, id quod architecto magnam similique quidem quisquam. Veritatis provident, accusamus optio et molestiae iusto suscipit qui. Placeat esse, ullam hic.</p>
      <p>Officia doloremque, animi corporis quis dolorem ut reprehenderit quisquam magni minus, quia laborum eum alias neque. Aliquam assumenda esse enim nihil animi sed voluptas, non odio sunt reprehenderit, corporis omnis?</p>
      <p>Voluptas aut animi facere, amet libero iusto earum enim sunt, sequi. Eveniet deleniti dolorum nostrum ad repellat magni doloremque ab cupiditate corrupti laudantium natus cum, accusantium. Voluptate asperiores odit possimus.</p>
      <p>Reprehenderit id, eum ad provident, nobis minima? Pariatur et quaerat deleniti repellat quos, maxime iste deserunt iure rerum, tempore nobis, facilis quas sunt soluta rem quibusdam dolores architecto eius nam!</p>
      <p>A odio corporis suscipit ipsa totam sed necessitatibus nesciunt doloribus architecto dolores perspiciatis illum quae iste voluptates eligendi illo unde molestiae, in atque, tempora aut tempore laboriosam! Pariatur atque, autem.</p>
      <p>Iusto repudiandae commodi at magnam harum nesciunt, excepturi fugiat quam ducimus, quos dicta in earum optio, rerum consequatur a. Facilis similique illum minus debitis consequuntur? Explicabo molestiae, perferendis dolores culpa.</p>
      <p>Minus veritatis iure labore similique, at, nihil quibusdam nesciunt ad fuga. Doloribus, debitis totam ullam sint id alias architecto dignissimos! Voluptatibus aliquam inventore earum, consequuntur alias expedita qui delectus nemo!</p>
      <p>Unde et at consequuntur soluta autem, harum odio, tenetur assumenda illum explicabo iste? Dolor aperiam architecto numquam. Molestiae laudantium, at quia deserunt sunt esse iusto consectetur! Illum repudiandae, dolore temporibus!</p>
      <p>Tenetur odit culpa enim nobis reprehenderit soluta beatae quibusdam in ipsam consequuntur, assumenda magni quis deleniti error mollitia obcaecati laboriosam labore quas eaque non. Debitis voluptatibus ullam dicta ducimus commodi.</p>
      <p>Magnam inventore a rem? Sed rerum magnam numquam dolorem ipsam, iure, eos commodi facere incidunt, cupiditate atque corporis iste quos quo officia ipsum nesciunt ducimus vel at repellendus eum consequatur?</p>
      <p>Velit eum quisquam quaerat sint libero nostrum dignissimos impedit, voluptate repellendus laboriosam suscipit obcaecati iure dolorum cupiditate. Possimus facilis architecto ipsam amet iste consequatur esse, perspiciatis placeat, unde vitae ut.</p>
      <p>Libero excepturi, voluptatibus voluptates similique assumenda tempora iusto debitis dolores in, reprehenderit, aliquam quae rerum beatae odio eos. Id sit iusto iste ratione mollitia quis cum quia quisquam magni optio.</p>
      <p>Totam vel illo cumque aliquid, nobis provident quisquam dolores perspiciatis harum odio fugiat minus laudantium molestias. Error sed alias quibusdam ab laudantium sit, corporis id illum saepe, repellendus, voluptates esse!</p>
      <p>Libero id tempore ipsam esse itaque quaerat assumenda, eligendi laudantium eius placeat recusandae a perspiciatis et amet dolorum, soluta nulla nisi. Saepe commodi qui debitis laudantium hic autem distinctio, vitae.</p>
      <p>Facere ullam vel soluta, ut deserunt sapiente commodi, odio earum expedita, optio perferendis quos eveniet sit consequatur dolorum aperiam! Saepe eveniet quidem praesentium, deserunt doloremque est distinctio tempora quaerat vero.</p>
      <p>Incidunt ratione vel accusantium. Facere tempora accusamus blanditiis quis, laboriosam, voluptatum culpa porro consequuntur quos sunt soluta consequatur magnam optio quaerat officia atque a vitae possimus harum maiores ex, placeat.</p>
    </div>
    
  </div>
</div>

/*Downloaded from https://www.codeseek.co/ghyde03/sidebar-YPaorE */
    
.kuhn-container {
  display: table;
  width: 100%;
  height: 100%;
}

.kuhn-row {
  display: table-row;
}

.kuhn-left,
.kuhn-right,
.kuhn-center {
  display: table-cell;
  padding: 20px;
}

.kuhn-left,
.kuhn-right {
  width: 25%;
  max-width: 160px;
  background: Aquamarine;
}

.kuhn-center {
  /* background: Pink; */
  /* border-right: solid 20px white; */
  /* border-left: solid 20px white; */
}

html,
body {
  height: 100%;
}

body {
  /* padding: 20px; */
  box-sizing: border-box;
  margin: 0;
}



/*Downloaded from https://www.codeseek.co/ghyde03/sidebar-YPaorE */
    

Comments