What is the best way to set the screen height without needing to scroll vertically?

How can I make the orange and blue area extend to the end of the screen or have the full screen size minus the height of the navbar? When using `vh-100`, it fills the full height but creates a vertical scrollbar which is not desired. Is there a way in Bootstrap to achieve something like `vh-100 - height of the navbar` to ensure everything fits without a real scrollbar being created? Alternatively, how can I specify that it should take up the full height without generating a vertical scrollbar?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

...

I found some related information here:

  • When using "height: 100vh" for the container, vertical scrollbar appears
  • Extra scrollbar when body height is 100vh
htmlcssbootstrap-4react-bootstrap

Answer №1

To adjust the height of the bottom section relative to the viewport height minus the navbar height (56px or 3.5rem), you can utilize the CSS property `height` with the value of calc(100vh – 3.5rem) applied to the `row` element.

Alternatively, you can opt for using flex, which has been incorporated into your existing code snippet.

The `calc` method is supported across all modern browsers including IE9 and above, while flexbox works seamlessly on all contemporary browsers along with IE11.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<div class="container-fluid vh-100 d-flex flex-column no-gutters px-0">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">
            Navbar w/ text
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        Home <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Features
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        Pricing
                    </a>
                </li>
            </ul>
            <span class="navbar-text">Navbar text with an inline element</span>
        </div>
    </nav>

    <div class="container-fluid d-flex flex-grow-1 flex-column">
        <div class="row flex-grow-1">
            <div class="col-md-4 bg-warning">
                <!-- vh-100 -->
                <div>
                    <div class="row m-1">
                        <div class="col-md-11">
                            Chats
                        </div>
                        <div class="col-md-1">
                            <i class="fas fa-plus-circle"></i>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md-12">
                            <form class="form-inline" style="height: 0%; width: 100%; padding-left: 0; padding-right: 0; padding-top: 8px">
                                <input class="form-control  mr-sm-1" style="width: 80%;" type="search" placeholder="Suchen" aria-label="Search" />
                                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="list-group">
                                <div>
                                    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="margin-top: 7.5px; margin-bottom: 7.5px">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1">List group item heading</h5>
                                            <small>3 days ago</small>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-11">Donec id elit non mi porta...
                                            </div>
                                            <div class="col-md-1">
                                                <span class="badge badge-primary badge-pill text-right">5</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8 bg-primary">
                <div>
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    <div class="row">
                                        <!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
                                        <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                            <img src="..." class="image-head-chat" alt="Responsive image" />
                                        </div>

                                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                            Text
                                        </div>

                                        <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                            Icons
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    Nachrichten
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                    Eingabe
                                    <div class="row">
                                        Form
                                    </div>
                                </div>
                            </div>

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

Answer №2

Follow these instructions:

STEP 1: Eliminate all instances of the 100-vh class from the code

STEP 2: Insert the code snippet below at the conclusion of the body tag -

<script>
    navHeight = document.querySelectorAll('.navbar-expand-lg')[0]
        .clientHeight;

    document.querySelectorAll('.container-fluid>.row>div')[0].style.height = `calc(100vh - ${navHeight}px)`;
    document.querySelectorAll('.container-fluid>.row>div')[1].style.height = `calc(100vh - ${navHeight}px)`;
</script>

FINAL OUTPUT::

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
  <div>
    <div class="row m-auto">
      <div class="col-md-12 p-0">
        <div>
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">
                            Navbar w/ text
                        </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
            <div class="collapse navbar-collapse" id="navbarText">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">
                                        Home <span class="sr-only">(current)</span>
                                    </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                                        Features
                                    </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                                        Pricing
                                    </a>
                </li>
              </ul>
              <span class="navbar-text">Navbar text with an inline element</span>
            </div>
          </nav>
        </div>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4 bg-warning">
              <div>
                <div class="row m-1">
                  <div class="col-md-11">
                    Chats
                  </div>
                  <div class="col-md-1">
                    <i class="fas fa-plus-circle"></i>
                  </div>
                </div>
                <div class="row mb-2">
                  <div class="col-md-12">
                    <form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
                      <input class="form-control  mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
                      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
                    </form>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="list-group">
                      <div>
                        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
                          <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">List group item heading</h5>
                            <small>3 days ago</small>
                          </div>
                          <div class="row">
                            <div class="col-md-11">Donec id elit non mi porta...
                            </div>
                            <div class="col-md-1">
                              <span class="badge badge-primary badge-pill text-right">5</span>
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-8 bg-primary">
              <div>
                <div class="row">
                  <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        <div class="row">
                          <!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
                          <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                            <img src="..." class="image-head-chat" alt="Responsive image" />
                          </div>

                          <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                            Text
                          </div>

                          <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                            Icons
                          </div>
                        </div>
                      </div>
                    </div>


                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        Nachrichten
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        Eingabe
                        <div class="row">
                          Form
                        </div>
                      </div>
                    </div>

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


  <script>
    navHeight = document.querySelectorAll('.navbar-expand-lg')[0]
      .clientHeight;

    document.querySelectorAll('.container-fluid>.row>div')[0].style.height = `calc(100vh - ${navHeight}px)`;
    document.querySelectorAll('.container-fluid>.row>div')[1].style.height = `calc(100vh - ${navHeight}px)`;
  </script>
</body>

</html>

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

Javascript on-page scroll positioning

My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header. Is there a way to adjust the scroll position b ...

javascripthtmlcssscrollanchor

Ensure that the link's color remains constant and remove any styling of text-decoration

Attempting to create a customized header. My goal is to change the color and remove text decoration in the navbar. Below is my code snippet: ReactJS: import React from 'react'; import './Header.css'; function Header() { return ( ...

javascriptcssreactjs

Having issues with the CSS block in my Jekyll dropdown navbar

I have been exploring resources from both w3schools and another website to create a navigation bar in Jekyll using frontmatter. However, I am running into issues with the block property in CSS. Most of the navbar is functioning properly, except for the dro ...

htmlcssjekyll

Override the default Bootstrap 5 styling for nav-links

I recently encountered a problem while trying to customize the appearance of the nav-link elements in my Bootstrap 5 navbar. I initially thought I could simply override the existing styles by targeting the class in my CSS. However, my attempts were unsucce ...

htmlcssstylingbootstrap-5

Is there a way to achieve auto-sizing columns in Bootstrap?

Is there a way to achieve auto-width-columns in Bootstrap similar to UIKit? I am looking to create 5 columns with automatic widths. In UIKit, this can be achieved using <div class="uk-width-1-5"> ...

twitter-bootstrapbootstrap-4

Struggling to dynamically create an identifier and data-bs-target, but experiencing difficulty in doing so

<ul> <li data-info="Amount in (₹)">{{depositeAmt}}</li> <li data-info="Status"> <button class="statusbtn Process" data-bs-toggle="collapse" data-bs-target="#colla ...

htmlangularbootstrap-5angular10

Delving into the World of CSS

I have been working on changing the background image using this JavaScript code, but I am not sure what to reference in the CSS file. Despite reading through everything, my screen still remains blank. $(function() { var body = $('body'); var bac ...

javascriptjqueryhtmlcss

Can you explain the significance of the characters '& > * + *' in JSX (CSS)?

When using material UI, the progressbar demo includes lines of JSX code like this: '& > * + *': { marginTop: theme.spacing(2), }, Can you explain what the selector '& > * + *' represents in this context? ...

cssreactjsjsx

Guide to placing an image in a designated position

I am looking to achieve the following scenario: Whenever a user uploads an image, it should appear in one of the smaller boxes on the right. Subsequent image uploads by clicking on the big box should populate the other small boxes on the right. Please refe ...

javascripthtmlimage

What could be causing the loss of my <textarea> information in the $_POST submission?

I have been working on a script that takes form data and displays it in a PDF or another printable format. There is a "New Line" button at the bottom of the form, which when clicked adds a new line to the form and stores the previous line's data in an ...

phphtmlformspost

The padding on this button seems to be arbitrary and nonsensical

I attempted to create a button with a red border that is positioned at the bottom and center, but the padding seems to be interfering with my design. It appears that with the border, the width extends to 100% which doesn't make sense. I have tried va ...

htmlcss

Remove CSS Styling from DataFrames in Pandas

My data frame consists of records that have this structure: Untitledp { margin-top: 0px;margin-bottom: 0px;line-height: 1.15; } body { font-family: 'Times New Roman';font-style: Normal;font-weight: normal;font-size: 13.3333333333333px; } .Normal ...

pythoncsspython-3.xpandas

JQuery Powered Text Analyzer

Our team is in the process of developing a text analyzer tool to review emails before sending them out. The goal is to involve all team members in selecting the best emails to send to clients: Implemented the following HTML code: <p class="sentence" ...

jquerycsshtml

How can I adjust the size of posts on the Tumblr Official Theme?

The size of posts on the Tumblr Official Theme caught my attention recently. It seems they are set at 500px, causing photos posted on the blog at the original dash post size of 540px to be compressed. I've examined the coding for the theme but can&apo ...

htmlcsstumblr

How can I create a carousel-style container in HTML that functions similarly to the one on Upwork?

Is there a way to transform my existing container into a carousel similar to the one on Upwork? https://i.sstatic.net/dJZjy.png I am looking to convert my current layout into a carousel, just like the example image provided: .flex-container { displa ...

htmlbootstrap-4slidercarousel

The scroll function triggers even upon the initial loading of the page

Trying to solve the challenge of creating a fullscreen slider similar to the one described in this question, I created a jsfiddle (currently on hold) Despite knowing that scrolling too fast causes bugs and that scrolling both ways has the same effect, m ...

javascriptjqueryhtmlcssevents

The footer is floating somewhere in the middle of the page, not at the bottom

Currently working on a webpage with the Twitter Bootstrap Framework. The footer is supposed to be at the bottom of each page with lots of content, but on one sub-page it's appearing in the middle instead: http://gyazo.com/45232ab25cdeb7705f9775a969051 ...

htmlcsstwitter-bootstrap

Experiencing issues with nested jQuery submit functions not triggering

I'm attempting to use AJAX to submit a form once a user has clicked on an image element. HTML <img class="remove_subscription" id="remove_mobile_id_<?php echo get_the_ID(); ?>" src="<?php echo get_bloginfo('template_director ...

jqueryhtmlajaxwordpress

Transitioning the height of a webpage element from a fixed value to fit the content dynamically

I'm trying to create a div that smoothly transitions from a set height to a height based on its text content. This likely involves considering the window width, as narrower windows cause text wrapping and increase the required height. #object { w ...

csshtmlwebkitcss-transitions

Display radio buttons depending on the selections made in the dropdown menu

I currently have a select box that displays another select box when the options change. Everything is working fine, but I would like to replace the second select box with radio buttons instead. Can anyone assist me with this? .sub{display:none;} <sc ...

javascriptjqueryhtmlcssdrop-down-menu