Create a design where two columns can be scrolled independently and extend to fit the height of the viewport

I have successfully created a JS Fiddle that demonstrates exactly what I am looking for: http://jsfiddle.net/j7ay4qd8/5/

This Fiddle features two columns that can be scrolled separately, and different sections of the left column can be easily scrolled to using JavaScript without affecting the right column or the rest of the page.

However, the only way I was able to achieve this in the example is by setting a hardcoded height using px values for the two nav elements.

height:calc(100vh - 90px);

Unfortunately, this approach may not work consistently across different browsers, devices, and resolutions. It will also break if new elements are added or if the size of the navs changes.

What I truly wish for is for the #form element to automatically adjust its size to fill the remaining space in the viewport.

In my current setup, adding another element like an alert would cause the #content and #sidebar to extend beyond the viewport, resulting in a jumpy scrolling experience as the entire page moves after the #content div has been scrolled.

For illustration, here is an example with an alert causing jumpy scroll: http://jsfiddle.net/c4k9u0mr/

I came across this jsfiddle that discusses achieving a similar layout using flexbox: http://jsfiddle.net/7yLFL/

Despite my efforts with flexbox, I have not been successful in making it work as intended. The only way I can enable separate scrolling for #content and #guidelines is by assigning them fixed heights, which brings me back to the challenge of making those divs occupy 100% of the container div.

Here is my unsuccessful attempt utilizing flexbox (with a fixed height of 100px): http://jsfiddle.net/jh6d5ztq/

Is there a way to achieve the functionality of the first and second JS Fiddles without having to specify a fixed height using pixels?

Answer №1

  1. To ensure elements take the remaining height of the viewport, their parent elements must have a height of 100%. In Bootstrap, use h-100.

  2. The closest parent of these elements should be set to flex with flex-direction: column. In Bootstrap, you can achieve this with d-flex and flex-column. Classes like row are already using flex properties so avoid using d-flex.

  3. For the element taking the remaining height, apply flex-grow-1. Some classes like col already have flex-grow: 1.

Bootstrap Flex Classes

html,
body {
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column h-100">
  <div class="py-3 bg-danger">

  </div>
  <div class="py-3 bg-danger">

  </div>
  <div class="flex-grow-1 bg-primary">

  </div>
</div>


Bootstrap Grid

html,
body {
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="fluid-container h-100">
  <div class="row flex-column h-100">
    <div class="col-auto py-3 bg-danger">

    </div>
    <div class="col-auto py-3 bg-success">

    </div>
    <div class="col bg-primary">

    </div>
  </div>
</div>


Now, elements with class div.col or div.flex-grow-1 occupy the remaining viewport height. If the content inside exceeds viewport height, scrolling is enabled by adding overflow: auto in custom CSS.

https://codepen.io/anon/pen/JwWpgQ


For a footer to stay at the bottom, interchange col with col-auto.


If multiple elements need separate scrollability, add overflow-auto and h-100 to each one.

html,
body {
  height: 100%;
}

.overflow-auto {
  overflow: auto;
}

.h-200vh {
  height: 200vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="fluid-container h-100">
  <div class="row flex-column h-100">
    <div class="col-auto py-3 bg-danger">
    </div>
    <div class="col-auto py-3 bg-success">
    </div>
    <div class="col bg-dark d-flex">
      <div class="w-50 h-100 overflow-auto">
        <div class="bg-danger h-200vh"></div>
      </div>
      <div class="w-50 overflow-auto h-100">
        <div class="bg-primary h-200vh"></div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/QzpQRO


Conclusion:

Incorporate Bootstrap grid as usual but utilize flex-column on row and col for elements that occupy full viewport height. Enable scrolling with custom CSS if needed.


Feel free to ask any questions in the comments. Check out the solution here: https://codepen.io/anon/pen/Jwrzwm

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

The alignment of the elements within the jumbotron is off

Hey there! I'm currently struggling to align the jumbotron with my calendar icon. Unfortunately, the elements of the jumbotron are not lining up properly. Could someone lend a hand in guiding me through this issue? Any ideas would be greatly appreciat ...

Can applications on Windows 8 operate using JavaScript, HTML5, and CSS3 that adhere to industry standards?

As a .NET developer, I tuned in to the keynote for the Build Event in Anaheim, California and had some questions regarding the new support for creating Windows 8 applications using JavaScript, HTML5, and CSS3. They showcased several examples and mentioned ...

What is the best way to alter the text of a button when the mouse hovers over it?

I'm looking to create a button that can dynamically change the text inside it when the cursor hovers over it, and then revert back to the original text when the cursor moves away from it. I attempted this in VScode using "document.getElementById().inn ...

The Wagtail/Django block is struggling to properly display content from a custom or nested StructBlock template

I have a block in the header of my base template that will apply "extra" CSS styles. These styles are dynamic and based on fields from a Wagtail CMS instance. In the base.html template, I define: <head> {% block extra_css %}{% endblock %} </he ...

When utilizing the build command in TailwindCSS, the resulting output file appears to be missing any content

I recently attempted to use TailwindCSS on my MacOS system. To install it, I used the command: npm install -D tailwindcss Following that, I generated the configuration file by executing the command: npx tailwindcss init I then proceeded to customize my ...

What is the process of generating a row in AngularJS?

I am struggling to create a row as shown in the image. Currently, my circle is not positioned on the right side and my "P" element is not receiving the background color. Here is the code snippet: http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=preview Is it p ...

Issue with CSS styling not being reflected in JSF application

I am currently diving into the world of JSF and facing an issue with moving my inline styles to a CSS file. Despite my efforts, I can't seem to get it to work as expected. Below is the code snippet for reference. The location of my XHTML file is as f ...

"Enhance Your Website Navigation with Bootstrap Navbar Links Extensions

I'm stuck on nesting a "navbar" in a Bootstrap row. The issue I'm facing is how to get the links to expand across the entire column. https://i.sstatic.net/9QbSN.png The code for this problem looks like: <div class="col-6 p-3 ...

Center the form on the page using Bootstrap

My bootstrap login form is currently appearing at the top of the page, but I want it to be centered. <div class="container"> <div class="row text-center"> <div class="col-sm-6 col-sm-offset-3 well offset4"> <div class=""&g ...

The best way to perfectly align my gridview in HTML and CSS

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Width="1000px" AllowPaging="True" PageSize="8" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowCanc ...

The header is displaying with the heading and image out of alignment

Take a look at my code header img{ width:10%; vertical-align: middle; } header h1{ text-align: right; display:inline; position: absolute; } header { width : 100%; height: 1% ; background: red; } <!DOCTYPE html> <html> <head> <m ...

Tips for creating a hover effect on a rounded outline button with a gradient border

What I am looking for: I want the buttons to have rounded corners; The buttons should use linear-gradient, with button A as the border and button B as the background color; When hovering over the buttons, the opacity should change to 0.5. This works fine ...

Nested div elements maintain background-image continuity

Is it possible to maintain the background image of the body within a child div that has a red background color with opacity? * { box-sizing: border-box; } body { background-image: url('https://d6scj24zvfbbo.cloudfront.net/306f4bc782c04bbe4939f8c ...

Turn your mouse cursor into a dynamic and animated image using jQuery

I've implemented a code snippet that replaces the cursor with 2 images placed at a small distance from each other: $(document).mousemove(function (e) { $("#firstImage").css({ left: e.pageX, top: e.pageY }); ...

Unable to modify zoom settings in iOS using javascript

My website is 1000x820 in size, but please don't ask me about responsive web design. Here's the viewport setup: <meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no"> When accessed on an iPhone SE w ...

upgrading from Internet Explorer 8 to Internet Explorer 9

Similar Topic: Transitioning from IE8 to IE9 Are there any recommendations for transitioning from IE8 to IE9 in order to operate an application smoothly? What factors should be taken into account for CSS, HTML, and JavaScript prior to the migration? ...

Offspring element overrides styling of its parent

#popBox{ width:100%; height:100%; position:fixed; left:0; top:0; border-collapse:collapse; background:black; opacity:0.8; display:none; } <table id="popBox"> <tr> <td></td> <td></td> ...

Using Bootstrap cdn in my React JS project caused conflicts with my custom CSS styles

I recently created a webpage in ReactJS and styled it using CSS. In order to enhance the styling of one component, I integrated Bootstrap by adding the latest CDN link to my "index.html" file. However, I noticed that the Bootstrap styles were overriding ...

Tips for retaining both fields in Django forms

When working with Django forms, the loop iterates through the fields. {% for field in form %} <div class="col-6"> {{ field.errors }} {{ field.label_tag }} {{ field }} </div> {% endfor %} While I manage ...

Initializing a table with data will only function properly when a breakpoint is set

Using the bootstrap-table library, I initialize a table with data fetched via ajax request. var arr = []; var getRows = function () { $.ajax({ type: "GET", url: hostUrl, contentType: "app ...