Adjust the height of the content to fit the viewport and eliminate the need for a

My Bootstrap 4 page is experiencing a vertical scrollbar issue when the footer is added. I want the entire page, including the footer, to adjust within the viewport height without the vertical scrollbar appearing. Is there a way to achieve this? Find my jsfiddle here.

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">

    <a class="navbar-brand" href="#">Demo</a>
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="my-1 mx-2 close">X</span>
      <span class="navbar-toggler-icon">☰</span>
    </button>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
                    <a href="#" class="nav-link active-link banner __mPS2id"> Home </a>
                  </li>
        <li class="nav-item">
                    <a href="#" class="nav-link banner __mPS2id"> Menu 1 </a>
                  </li>
        <li class="nav-item">
                    <a href="#" class="nav-link banner __mPS2id"> Menu 2 </a>
                  </li>
                <li class="nav-item">
          <a href="#" class="nav-link  mPS2id-highlight ">Menu 3</a>
        </li>
        <li class="nav-item admin">
          <a href="#" class="nav-link">Menu 4</a>
        </li>
                      </ul>
    </div>
  </nav>
<div class="container-fluid">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet orci quis erat imperdiet condimentum vel eu sapien. Morbi convallis sapien et molestie finibus. Fusce eleifend vitae orci eget porta. Etiam malesuada facilisis iaculis. Ut tempus, sem quis tincidunt condimentum, risus ligula vestibulum mi, sit amet imperdiet mauris ex id augue. Sed sed dictum velit. Etiam varius elit et odio vulputate, sit amet interdum tellus sagittis. Morbi vulputate leo a dolor consequat tempor. Nam sed auctor nisi. In luctus eleifend laoreet. Morbi id nisl non ex fringilla tincidunt. Suspendisse eget venenatis tortor.

Proin eu consectetur magna. Aliquam erat volutpat. Aenean vehicula imperdiet aliquam. Nam a sem vel est tristique laoreet. Aenean nisl dolor, tempor in iaculis ac, efficitur at lorem. Proin scelerisque ipsum ut sapien luctus, id viverra tellus ornare. Cras lorem tortor, ultricies hendrerit vulputate quis, tincidunt in ipsum. Nam nec dolor dolor. Donec quis felis laoreet, feugiat purus et, imperdiet tortor. Cras non pulvinar leo, nec lobortis mi. Phasellus pellentesque placerat auctor. Suspendisse a urna vel ipsum faucibus hendrerit eget sit amet leo. Etiam consequat ex eget pulvinar pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquam, tellus nec consequat faucibus, dui felis condimentum nulla, quis elementum massa turpis et felis.
</div>
<div class="footer">
    Ⓒ 2021 All rights reserved T
</div>
</body>
</html>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

By setting the height as a percentage, I successfully tackled the issue.

.full-width-container{
height: 93%;
}

.page-footer{
height: 7%;
}

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 height of Bootstrap 4 row does not adapt to the height of the Slick.js slides

I am attempting to create a Slick.js slider with a parent and thumb navigator. In the demo on this codepen, each slide has a different height based on the content within the container. I expect the row with a bg-dark background to adjust its height as Sl ...

bootstrap-4slick.js

Adjusting the <div> size for optimal display on iPhone and iPad screens

I am having an issue with my jQuery Mobile app. I have a page with a header and footer, and the main content consists of 4 images arranged in a 2x2 grid format. Since I couldn't get JM grid to work, I created my own grid using a div container. Here is ...

htmljqueryiphoneipadmobile

In Angular 2, I make an effort to store and recall the chosen dropdown values using Localstorage

Is there a way to keep the selected dropdown values for each dropdown when navigating away from and back to the page? I've tried using ngModel, but it binds one value for all dropdowns. What I need is for each dropdown to retain its own selected value ...

htmltypescriptangular2-directives

What are the steps to create a hovering dropdown menu that changes the background window to transparent when hovered over?

Is there a way to create a dropdown menu that changes the background window to transparent when hovered over? Here is an example of what I am looking for: https://i.sstatic.net/FplLm.png The dropdown menu should look like this when hovered over: https: ...

htmlcss

Is it possible to implement localStorage for auto-filling multiple forms simultaneously on a single webpage

I have been exploring a code snippet by Ke Yang that uses localStorage to synchronize text in form fields across different fields. I am interested in implementing something similar. On a page where I have a library of downloadable items, there are approxi ...

javascripthtmlformslocal-storagecontact-form-7

Guide to adding dividing lines between columns with bootstrap

https://i.sstatic.net/FHO1v.pngCan someone help me with adding separators between columns in my HTML code? I've tried the code below but it's not working. Is there a way to achieve this? I've attached a screenshot of what I'm expecting. ...

cssbootstrap-4

Tips for creating extra space on both sides of a Bootstrap container

I am currently working on creating some extra spacing on the left and right of a Bootstrap container. My current approach involves using a 'fluid' container/section and adding margin on both sides to create the desired space. However, the issue ...

csstwitter-bootstrapbootstrap-4sassbootstrap-5

Bootstrap alert JS refuses to slide down

Here is the JavaScript code to make a blue bar slide down on click: $('#comment').click(function(e) { e.preventDefault(); $('#comment').slideDown(); }); ...

javascriptjqueryhtmlcsstwitter-bootstrap

iOS reveals often have a foundation modal that appears behind the background

I am currently working on implementing a confirmation modal that pops up when a button is clicked. Although the modal appears, it seems to be positioned behind the background that darkens the rest of the page. Relevant CSS: .reveal-modal-bg { background ...

ioscsszurb-foundation-5

Image in Bootstrap is not resizing its height based on the height of the parent

I am facing an issue with resizing images inside buttons. Despite using the Bootstrap-4 class ("img-fluid"), the images are not adjusting properly when the button height or text size is altered. The image height remains unchanged. Here is a snippet of my H ...

csshtmltwitter-bootstrapbootstrap-4

The Bootstrap form validation success message is failing to appear

I'm struggling with bootstrap form validation as the success message does not appear after submitting the form. I have a PHP mail function script that displays 'thank you' in a new page upon submission, even though I have included return fal ...

phpjquerytwitter-bootstrapbootstrap-4

Exploring Bootstrap 4: Creating list-inline elements for various screen sizes

Is there a way to align list items on top of each other for a breakpoint <=575px (xs), and align the items next to each other for a breakpoint >575px (sm) using Bootstrap display properties? I found some information on How to display a list inline u ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Why is my column getting devoured even though it has custom content tailored to it?

In my layout, I have one column, one row, and three nested columns. Each column contains a custom-designed button instead of using the default Bootstrap button. However, there seems to be an issue where one of the columns is getting cut off. To better und ...

htmlcsstwitter-bootstrap

What is the best way to have my hamburger menu button switch colors after being clicked?

I am currently working with Bootstrap and I am attempting to change the background color of the hamburger menu button once it has been clicked. While I can successfully modify the color within the browser inspection tool, I am struggling to replicate this ...

htmlcsstwitter-bootstrap

Leveraging window environment variables for displaying or hiding a React component

Is it a viable option to display or hide a React component using window.env? For instance, imagine we have a feature that is not yet ready for release, and we are considering hiding it by setting window.env.FEATURE_ENABLED=0 (these variables will be fetch ...

htmlreactjs

The background color spills outside the column when using 100% width

Bootstrap 5 is being used, and two columns have been created on the page. The current output looks like this: https://i.stack.imgur.com/P6oZs.png Now, there's a need to display an orange color from end to end of the left column. To achieve this, h- ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to access a third table with a hasOne relationship in Laravel?

In my database, I have a table called tickets which is linked to the customer table. The customer table is associated with the user table. Ticket.php public function user() { return $this->hasOne('App\Models\User'); } /** * G ...

phphtmlmysqlangularjslaravel

Tips for ensuring all my onclick event are clickable in iOS browser

Currently, I am developing a web page using HTML5 and JQuery Mobile. I have encountered an issue where the onclick function does not work on iOS device browsers. Is there a way to change all onclick events to be accessible through tapping instead? This wou ...

javascripthtmljquery-mobile

Creating a triangle shape using Bootstrap to style a div element, similar to the image provided

Trying to achieve the look of the attached image with a few divs. I know I can use a background image like this: background:url(image.png) no-repeat left top; But I'm curious if there's another way to achieve this without using a background ima ...

javascripthtmlcsstwitter-bootstrap

iPhone 5s landscape mode causing issues with media query

I have been testing a media query that looks like this: @media screen and (max-width: 600px) { .blah { font-size: 1.25rem; } } When I test this in responsive mode on browser dev tools, everything looks great. I can see all the changes as I resize ...

htmlcssiphonemedia-queries