Creating responsive containers in Bootstrap 4 by adjusting sizes based on screen width and height

I've been scratching my head trying to crack this code. My goal is for the container size to always adjust based on the screen size. I attempted setting the height using min-height and max-height, however, it's not perfectly aligned with the screen size and the browser automatically adds a vertical scrollbar which I want to avoid.

I'm making use of a container-fluid attribute for the outer div. I have a grid layout setup as shown in the attached picture. I intend for the divs to occupy the entire screen without triggering a scrollbar by default. I have deleted the height styles that I've experimented with.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class='container-fluid'>
  <div class='row content'>
    <div class='col-2 mr-auto pl-0 pr-0'>
      <div class='alert alert-primary mb-0'>
        <h2 class="text-center">Menu</h2>
      </div>
      <nav class="nav flex-column alert alert-primary" style="min-height:93vh;">
        <p><a href="{% url 'logout' %}">logout</a></p>
        <div class="btn-group dropright">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Requisition
                        </button>
          <ul class="dropdown-menu">
            <li><a class="nav-link text-center" href="{% url 'requisition:create_req' %}">New Requisition</a></li>
            <li><a class="nav-link text-center" href="{% url 'requisition:basket' %}">Basket</a></li>
            <li><a class="nav-link text-center" href="{% url 'requisition:pending_action' %}">Pending</a></li>
            <li><a class="nav-link text-center" href="{% url 'requisition:assist_list' %}">Assistance Required</a></li>
          </ul>
        </div>

      </nav>
    </div>
    <div class='col-10 pl-0 pr-0'>
      <div class='alert alert-primary scrollbar' style="min-height:100vh; max-height:100vh; overflow-y:scroll">
        {% block content %}
        <br> Hi {{ user.username }}!

        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
        <button id="about-btn"> Click Me - I'm Javascript on Speed</button>
        <button class="ouch"> Click Me - I'm Javascript on Speed</button>

        <p><a href="{% url 'logout' %}">logout</a></p>
        {% endblock content %}
      </div>
    </div>

  </div>

</div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Don't bother with the unnecessary 

min-height:100vh; max-height:100vh; overflow-y:scroll
in the right div. I used flexbox in the example below, where the "Menu" portion is set to 20% height and the "nav" part below it to 80%, totaling 100%

html,
body {
  height: 100%;
}

div {
  border: 1px solid black;
  background: lightblue;
}

.mainwrapper {
  display: flex;
}

.brand {
  height: 20%;
}

.vertical-nav {
  height: 80%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="mainwrapper h-100">
  <div class="col-2 pl-0 pr-0 h-100">
    <div class="brand">
      <h2 class="text-center">Menu</h2>
    </div>
    <div class="vertical-nav">
      <p><a href="{% url 'logout' %}">logout</a></p>
      <div class="btn-group dropright">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Requisition
                        </button>
        <ul class="dropdown-menu">
          <li><a class="nav-link text-center" href="{% url 'requisition:create_req' %}">New Requisition</a></li>
          <li><a class="nav-link text-center" href="{% url 'requisition:basket' %}">Basket</a></li>
          <li><a class="nav-link text-center" href="{% url 'requisition:pending_action' %}">Pending</a></li>
          <li><a class="nav-link text-center" href="{% url 'requisition:assist_list' %}">Assistance Required</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div style="overflow-y: auto;" class="col-10 pl-0 pr-0 h-100">
    <div class='alert alert-primary scrollbar'>
      {% block content %}
      <br> Hi {{ user.username }}!

      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
      <button id="about-btn"> Click Me - I'm Javascript on Speed</button>
      <button class="ouch"> Click Me - I'm Javascript on Speed</button>

      <p><a href="{% url 'logout' %}">logout</a></p>
      {% endblock content %}
      <p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p><p>the stone giant</p>
    </div>
  </div>
</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

Toggle between pausing and running CSS animations with this handy button!

My awesome graphic animation is in CSS and SVG format. I've been struggling to add a play/pause button to control the animation on click. Here is what I have so far: .animation1 { --animation-delay: 0.1s; animation: ani_keyframes 1 ...

javascripthtmljquerycsscss-animations

Sending an AJAX request when refreshing a page segment

I have recently registered, but I have been a silent reader for years. Up until now, I have managed to find the answer to all my questions by searching on Stack Overflow. However, I am faced with a new challenge... I am new to AJAX and I am in the process ...

javascriptphpjqueryhtmlajax

Tips for utilizing the font-family style to span multiple columns

I recently discovered that you can set the background color across table columns using the <colgroup> tag. table { border: 2px solid; border-collapse: collapse; } td { border: 2px solid; } <ta ...

htmlcsshtml-table

Ensuring the validity of an HTML form by including onClick functionalities for additional form elements

I am working on a form that I put together using various pieces of code that I found online. My knowledge of HTML and JavaScript is very basic. The form includes a button that, when clicked, will add another set of the same form fields. Initially, I added ...

javascriptjqueryhtmlvalidationforms

Hovering over triggers tooltip flickering with Mouseover/Mouseenter interaction

When the mouseover event is triggered on the parent element, there seems to be a flickering issue when moving into the tooltip (child) element. The console log indicates that the mouseover/mouseenter event is being fired rapidly. The tooltip does not stay ...

javascriptangularjstwitter-bootstrap

struggling to rectify an undefined index error on my PHP page

My challenge revolves around accessing the token from an HTML page, where I have an input element containing the token. Whenever I try running this page on a server (WAMP) on Windows 7, I encounter an error stating "undefined index" on the "api_key". How ...

phpjqueryhtmlajax

Creating Vertical Text and Div Blocks using CSS

Trying to set up different color section blocks with vertical text on my website's dashboard page. Similar to this example in JSfiddle: http://jsfiddle.net/afpn2y19/4/ <div id="outer"> <div id="inner"> //Feeling lost - ho ...

htmlcsstextrotation

A limited-width div located on the right side

When I tried to align the div on the right with a max-width of 1200px on a page with an available width of 1600px, it did not work as expected. .csystem { display: flex; max-width: 1200px; flex-direction: column; justify-content: flex-end } < ...

htmlcssflexboxright-align

There seems to be an issue with the CSS file linking properly within an Express application

Every time I run my app.js file, the index.html file is displayed. However, when I inspect the page, I notice that the CSS changes are not taking effect. Strangely, if I open the HTML file using a live server, the CSS changes are visible. Can someone exp ...

javascripthtmlcssnode.jsexpress

Wordpress articles refuse to appear side by side

I've been at it for hours now, trying to solve this issue with no luck. I have a Wordpress loop on my homepage that displays post thumbnails vertically, but I want them to appear in sets of three images before starting a new line. Here's the cod ...

phpcsswordpress

Altering the look of a button as you navigate to it by tabbing

Check out this code snippet: In my design, I have set it up so that the user can tab through the username field first, then the password field, followed by the login button and finally the navigation tabs labeled "Getting Started" and "Vegetables." The i ...

htmlcss

Generating an Array of Meshes Using Objects in THREE.JS and GLTF Format

Here is the code snippet I have for loading a mesh onto an object. Currently, it is iterating through the entire mesh. Code snippet: var loader = new THREE.GLTFLoader(); loader.load( '../gtf/Box.gltf', function ( gltf ) { ...

javascripthtmlthree.jsblendergltf

What is the most effective method to arrange absolute divs generated randomly in a grid-like formation?

Hey there! I'm facing an intriguing challenge with my app. It's designed to generate a variable number of divs which are always in absolute positioning. Unfortunately, making them relative is not an option due to some other factors within the app ...

javascripthtmlcss

Activated a DOM element that was retrieved through an AJAX request and displayed it inside a light

I want to implement a lightbox plugin (specifically lightbox_me) to display a html DOM element retrieved through an ajax request. This is the code I am using: <script src="script/jquery.lightbox_me.js"></script> <script> $(& ...

javascriptjqueryhtmlajaxlightbox

Inaccurate sizing of popup dialogs on SharePoint 2010

Currently, I am in the process of revamping a SharePoint 2007 web application to SharePoint 2010. I was surprised to find that the popup dialog boxes for new items, edit, etc. have inline styles for fixed width and height. Below is an example where div.ms ...

jquerycsssharepointsharepoint-2010

Break down dashboard components to load individually in asp.net core, displaying a loading icon for each component

Currently, I am developing a .NET Core dashboard that contains numerous graphs and data. When loading the dashboard, it takes a considerable amount of time. I am looking to optimize this by loading the main dashboard first and then displaying the widgets ...

.nettwitter-bootstrapasp.net-core.net-core

CrispyForms: FormHelper - Easily move the </form> tag to a different location and manage multiple forms from a single model

When utilizing FormHelper and invoking the Form using {% crispy form %}, it generates a Form wrapped within <form> tags. However, my Template is structured into two columns. The first column displays the dynamically generated {% crispy form %}. The ...

pythonhtmldjangodjango-formsdjango-crispy-forms

A dynamic jQuery plugin that replicates the smooth page sliding animation found in iPhone apps

Currently, I am in search of a jQuery plugin that has the capability to navigate users to different pages on a website with a sleek sliding animation, similar to what we see in some widely used iPhone apps. Despite my best efforts to create this functional ...

iphonehtmlcssanimationjquery-plugins

CSS animation using a series of linked elements

Is there a way to make my buttons animate sequentially? For example, the second button should start animating only after the first one has finished. Any assistance would be greatly appreciated! a { padding: 6px; display: block; width: 50px ...

htmlcssanimation

Combining the Power of Flickity and Bootstrap 4 Carousel

I recently started using Bootstrap 4 and was exploring Flickity just a week ago. Now, I am attempting to integrate Flickity with my Bootstrap 4 by referencing the Bootstrap 4 examples and utilizing the carousel. However, when I added Flickity to the built- ...

jquerycsstwitter-bootstrapbootstrap-4flickity