An interactive scrollable list on Bootstrap 4.1 with flexible 50% height using the

Looking to design a full-screen layout with a top and bottom half. The top half should display a list of items with a scroll bar if it exceeds half of the screen height.

After researching, I found a solution using the following structure:

<div id="app">
  <main role="main" class="container-fluid d-flex">
    <div class="row flex-fill bg-primary" style="min-height:100vh;">
      <div class="col-sm h-100">
        <div class="row h-50 bg-warning" style="overflow:scroll;">
          <div class="col-sm">
            <div>
              <ul class="">
                <li class="">Series 100</li>
                <li class="">Series 200</li>
                <li class="">Series 300</li>
                <li class="">Series 400</li>
                <li class="">Series 500</li>
                <li class="">Series 600</li>
                <li class="">Series 700</li>
                <li class="">Series 800</li>
                <li class="">Series 900</li>
                <li class="">Series 1000</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row h-50 bg-success">
          <div class="col-sm">
             <div>
              test
            </div>
          </div>
        </div>
      </div>
    </div> 
  </main>
</div>

http://jsfiddle.net/0zbcr7mg/4/ (please adjust output window size accordingly)

However, when additional items were added to the list, the layout broke - the scrollbar exceeded the expected height:

http://jsfiddle.net/0zbcr7mg/3/

What modifications should be made in the markup for consistent behavior regardless of the number of elements in the list?

csstwitter-bootstrapflexboxbootstrap-4

Answer №1

You simply have to edit the row min-height:100vh to height:100vh...

http://jsfiddle.net/tokep2gn/

<div id="app">
    <main role="main" class="container-fluid d-flex">
        <div class="row flex-fill bg-primary" style="height: 100vh;">
            <div class="col-sm h-100">
                <div class="row h-50 bg-warning" style="overflow:scroll;">
                    <div class="col-sm">
                        <div>
                            <ul class="">
                                <li class="">Series 100</li>
                                <li class="">Series 200</li>
                                <li class="">Series 300</li>
                                <li class="">Series 400</li>
                                <li class="">Series 500</li>
                                <li class="">Series 600</li>
                                <li class="">Series 700</li>
                                <li class="">Series 800</li>
                                <li class="">Series 900</li>
                                <li class="">Series 1000</li>
                <li class="">Series 100</li>
                                <li class="">Series 200</li>
                                <li class="">Series 300</li>
                                <li class="">Series 400</li>
                                <li class="">Series 500</li>
                                <li class="">Series 600</li>
                                <li class="">Series 700</li>
                                <li class="">Series 800</li>
                                <li class="">Series 900</li>
                                <li class="">Series 1000</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row h-50 bg-success">
                    <div class="col-sm">
                        <div>
                            test
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </main>
</div>

Answer №2

One way to streamline your code is to separate it into two sections, each with a viewport height of 50%. Here's an example:

HTML

<section id="top">
  <ul>
    <li class="">Series 100</li>
    <li class="">Series 200</li>
    <li class="">Series 300</li>
    <li class="">Series 400</li>
    <li class="">Series 500</li>
    <li class="">Series 600</li>
    <li class="">Series 700</li>
    <li class="">Series 800</li>
    <li class="">Series 900</li>
    <li class="">Series 1000</li>
  </ul>
</section>
<section id="bottom">
  <ul>
    <li class="">Series 100</li>
    <li class="">Series 200</li>
    <li class="">Series 300</li>
    <li class="">Series 400</li>
    <li class="">Series 500</li>
    <li class="">Series 600</li>
    <li class="">Series 700</li>
    <li class="">Series 800</li>
    <li class="">Series 900</li>
    <li class="">Series 1000</li>
  </ul>
</section>

CSS

* {
  margin: 0;
  padding: 0;
}

#top {
  height: 50vh;
  background-color: dodgerblue;
  overflow: auto; /* Allows for scroll without scrollbars created by overflow: scroll; */
}

#bottom {
  height: 50vh;
  background-color: tomato;
  overflow: auto;
}

Hopefully, this simplifies things for you! 👍

Answer №3

If you're searching for a different approach, consider the following:

1) Ensure that the root div always has a value of 100vh.

2) The main layout consists of a single row with two col-12 columns, each taking up exactly 50% of the height.

I have also populated the ul list using Javascript to maintain cleaner markup.

$(document).ready(function()
{

    for (var i = 100; i <= 2000; i += 100)
    {
        $(".custom-list").append("<li>Series " + i + "</li>");
    }
    
});
#app {
    height: 100vh;
}

#bottom-section, #top-section {
    overflow-y: scroll;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<div id="app">
<main role="main" class="container-fluid h-100">
<div class="row bg-primary h-100">

  <div id="top-section" class="col-12 h-50 bg-warning">
    <ul class="custom-list"></ul>
  </div>

  <div id="bottom-section" class="col-12 h-50 bg-success">
    <div>test</div>
  </div>
</div>
</main>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn how to personalize the Bootstrap carousel by keeping certain text elements static while others change with each background image

I am a beginner when it comes to using Bootstrap and I am seeking some guidance on how to make the following design concept a reality. Our goal is to have a carousel featured on our homepage, where the company name (aligned to the left) remains visible at ...

htmlcssbootstrap-4

What is the best way to create a flexible Ul-LI menu?

Is it possible to create a flexible menu where clicking on an item does not cover other items in the menu? #demo { margin: 30px 0 50px 0; font-family: sans-serif; } #demo .wrapper { display: inline-block; width: 180px; height: 20px; position ...

javascripthtmlcssdrop-down-menu

The dimensions of the pop-up window in Chrome's JavaScript are not displaying correctly

My goal is to launch a new chat room window on our website. The dimensions of the chat room are set to 750px x 590px. Below is the link I am using to trigger the javascript popup. <a href="javascript:void(0)" onclick="window.open('http://gamersuni ...

javascripthtmlcssgoogle-chrome

When we typically scroll down the page, the next section should automatically bring us back to the top of the page

When we scroll down the page, the next section should automatically bring us back to the top of the page without having to use the mouse wheel. .bg1 { background-color: #C5876F; height: 1000px; } .bg2 { background-color: #7882BB; height: 1000px; } .bg3 ...

javascripthtmlcss

Issue with Boostrap collapse functionality not functioning correctly on live website, although it is working as intended in local environment

I am experiencing an issue with the collapsible navbar on my website. It is not closing smoothly as it should, despite being correctly implemented. The website is built using Bootstrap 4 and Jekyll, with a gulpfile for minifying and concatenating HTML, CSS ...

javascriptjquerybootstrap-4minify

Button background must be grayscale, while the text should remain unaffected

I have a variety of buttons with different background images. My goal is to apply a grayscale filter to the backgrounds by default and remove the filter on hover, without affecting the color of the button text. Currently, when I apply the grayscale filter ...

cssbuttontextbackgroundgrayscale

Looking for a way to keep the mobile ad unit fixed at the bottom of the screen

I am currently working on incorporating a 320x50 mobile ad into the mobile version of my website. The goal is to have the ad fill the entire width of a mobile device. However, the issue I'm facing is that the ad appears small and does not stretch acro ...

cssmobile

Make sure to include the !important declaration when setting the fill property for

When attempting to apply !important to the fill property of an SVG file, I'm encountering issues with the syntax. Despite my efforts, the !important directive is not being correctly applied to the fill property, resulting in the circle element renderi ...

cssreactjssvg

Create a mobile-friendly thumbnail gallery in the center of the page

Check out my website: I am struggling to keep the thumbnail gallery centered on my site at all times. I have tried using the following CSS: text-align: center; On the parent element and setting thumbnails as: display: inline-block; But unfortunately, ...

htmlcssthumbnailsimage-gallerytwitter-bootstrap-2

Exploring Angular Material Design's method for vertically populating a column

Is there a way to fill a column vertically in my current app? https://i.sstatic.net/uu4yO.png I've been struggling for hours trying to make the vertical items span the entire height of the page. I have pored over documentation and other posts, but I ...

cssangularjsmaterial-designangular-material

Guide on activating a specific tab or pill on a page by redirecting when clicking on a div

I am trying to make a clickable div tag that opens the selectorders page with the service tab already open when the "1st" class div is clicked. I am using Bootstrap 4 and jQuery for this functionality. I have attempted using addClass and removeClass but h ...

jquerybootstrap-4

What is the best way to change the Paper-radio-button to look like a traditional radio button?

When it comes to paper-input, there is an alternative called iron input for achieving a more traditional design. Is there a similar alternative for radio buttons in order to make them resemble standard radio buttons? If so, I would appreciate any guidanc ...

htmlcsspolymerpolymer-1.0

Align the h1 vertically within a div without any extra space around it

I am trying to vertically center my content div within my header div without any extra space around it. I had it working before but the width of the content div would always be 100%. Here is the code I used: #header { position: absolute; width: 100% ...

htmlcss

What is the method to prevent scrolling on the body while allowing scrolling on a specific div element?

<html> <body> <div class="container"> <div class="menu"></div> <div class="list"></div> </div> </body> </html> .menu{ float:left; width:50%; } .list{ float:right; width:50% ...

htmlcss

What is the best way to align elements in relation to a central div container?

Is there a way to align two buttons in the center on the same line, and then position a selector to the right of those centered buttons? How can I achieve this arrangement? Essentially, how do you position an element in relation to a centered div? UPDATE: ...

htmlcsscentering

Positioning the box in the middle of pages

I have a website page at the following link: However, the content is not centered on the screen. Here are the codes I'm using: <div class="section_inner"> <div class="container"> <div class="row"> <?ph ...

htmlcss

Issue with image not fully encompassing div in Bootstrap 5

Currently working on a grid layout with images within the Bootstrap 5 framework. Here is the code snippet for the grid: #project_images img { height: 100%; width: 100%; object-fit: cover; } <section> <div class="container" id ...

htmlcsstwitter-bootstrapbootstrap-5

Looking to convert an empty star glyphicon button into a star glyphicon button when clicked using JavaScript?

Is there a way to make the glyphicon change when clicking on the button instead of the glyphicon itself? <script> $('.btn').click(function(){ $(this).find('.glyphicon').toggleClass('glyphicon-star-empty glyphico ...

javascripthtmlbootstrap-4

Tips for positioning two divs side by side in block formation

I'm attempting to display two distinct div elements as blocks, one for the name and the other for the names. Here is the Fiddle The names block should be displayed as a separate block next to the name div, regardless of screen responsiveness. How ca ...

htmltwitter-bootstrapcss

Bootstrap dropdown seems to be having a stubborn streak and refusing to cooperate

I'm having trouble getting this code from the bootstrap website to work properly. The dropdown menu doesn't seem to be functioning correctly and I've tried various solutions without success. Here's the snippet of code: <head> &l ...

htmlbootstrap-4