How can I make a Bootstrap 5 container adjust to the height of the screen?

I am currently working with Bootstrap 5 and facing an issue while displaying a calendar on the screen. The height of the container appears to be around 25% longer than the screen height. I have tried setting the height to "100%" and "80%" in the CSS, but it did not work as expected.

CSS:

.sectionHeight {
    height: 100vh;
    width: auto;
}

HTML:

<div id="calendarAdmin"  class="container sectionHeight" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">

    <div id="includedContent"></div>

    <div class="col-lg-12 col-md-12 col-sm-12 col-12 beta">
        <h3>Full Calendar</h3>
        
        <div style="text-align: center;">
            <span id="ajaxGetUserServletResponse1" style="color: red; background-color: white;"></span>
        </div>
        
        <div id="loader"><img src="images/spinner.gif"/></div><!-- loading spinner -->
        
        <div class="whiteBackground" id="calendar"></div>
    </div>
</div>
htmlcssbootstrap-5

Answer №1

Utilize the power of bootstrap utilities to customize the width and height based on the viewport size.

<div class="min-vw-100">Minimum width 100vw</div>
<div class="min-vh-100">Minimum height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>

To adjust it according to your requirements:

vh-100
vh-75 
vh-50 
vh-25

Viewport-relative sizing options available here

Answer №2

If you want to customize your CSS, consider using the universal selector * to target all elements on the page. Take a look at your bootstrap settings and remove any default margin and padding styles. Instead, try to apply the following code:

*{
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;
}

Make sure to use the important rule to override any Bootstrap default settings and set everything according to your own preferences.

Answer №3

To prevent the browser window from scrolling, one approach would be to utilize CSS's overflow property in order to enable scrolling within the calendar's parent container only if it is deemed essential.

If the goal is for the entire calendar to fit within the screen, adjustments can be made to font sizes, margins, and padding at different breakpoints.

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

Differences between .php and .html: What causes variations in IE rendering?

After duplicating one of the HTML pages in my project, I simply changed the file extension from .html to .php. Surprisingly, all browsers display the page identically except for Internet Explorer (IE), which seems to handle the pages differently based on t ...

phphtmlinternet-explorer

Mixing without Collections

After initially posting this question yesterday, I realized that I needed to clean up my code before proceeding. However, for my assignment, I am required to create a JavaScript quiz where the questions and answer choices are shuffled every time a user ret ...

javascripthtml

The reason CSS properties do not inherit automatically

As I work on designing a straightforward website, I find myself grappling with CSS and particularly inheritance. My objective is to create a side menu where items are stacked vertically: #inner-flex-container { display: flex; flex-direction: column; ...

htmlcssflexboxalignment

Display mobile app components directly inside HTML tags within a webview

Is it possible to integrate our native Android components within regular HTML content and display them on a webview? For instance, instead of a standard button in a basic HTML page, can we replace it with a Native Android Button? How would this be accomp ...

androidhtmlwebviewnative

Embed an audio file onto a webpage

Is there a way to add an audio file to my website if I only have the .mp3 version and not the .ogg one? When I try to play the audio, it doesn't work. Can someone help me with this issue? Here is the code I am currently using: <audio controls auto ...

htmlaudioogg

Trouble with CSS navigation

Hello! In Dreamweaver, I have completed the design for my navigation bar. Here is how it looks: However, when I view it in Firefox, the navigation appears all jumbled up. It's quite frustrating... Below is the code that I'm using: #navbar { ...

jqueryhtmlcss

What is the best way to extract and analyze CSS code from an HTML page using Java programming language

I'm looking to extract and parse the content of HTML pages using the Jsoup API, which can be found at . However, I've encountered a challenge in extracting CSS that is located in a different folder. How can this be achieved? Currently, my code ...

javahtmlcssjsoup

Inject a jQuery form submission using .html() into a div element

I am currently working on developing a basic forum where users can view listed topics and have the option to add new ones on-the-fly by clicking a link or image. How can I detect and handle the form submission event for the dynamically added form within an ...

javascriptjqueryhtmlforms

JavaScript functions do not work within the HTML code

I am currently working on my debut website and I'm facing an issue with the JavaScript file not functioning properly. Is there a chance you can help me troubleshoot this? I'm still in the learning stages of programming. This is the HTML content ...

javascripthtmlcss

Ensure that any relevant information is placed adjacent to a floated image

I am currently designing a responsive webpage featuring images of people's faces placed next to descriptive text. At smaller screen widths, everything looks perfect. However, as the page widens, the text for one person starts next to the image of the ...

htmlcssimagecss-float

Is there a way to have one element automatically expand when another is selected?

I'm currently utilizing the date and time picker from . However, I need some assistance with the current setup. Currently, the date and time pickers are in separate input fields. In order to select a date, I have to click on the Date input field, and ...

javascriptjqueryhtmlcss

Display an icon to act as a separator between icons in CSS styling

Is there a way to display a spacer line before and after icons (cross symbols) while excluding the spacer line before and after buttons carrying the word "Cancel"? How can this be achieved? This is my CSS file: .Container > *:first-child::before, .Con ...

htmlcss

Switching between light and dark mode in R Shiny tables with customizable headings

I'm currently working on a visualization project for tracking Covid-19 data, and I'm having trouble changing the text color above and below a table I've created. I've attached an image to show exactly what needs to be modified. Additio ...

cssrshinydatatablesdt

The elements with identical IDs are being superimposed

There are two div elements on my webpage, both assigned the "nav" class. Below is the CSS code: .nav { border-radius: 1em; background-color: #0000BB; color: white; padding: 1em; position: absolute;//Fits size to content. margin: 1em; left: 50%; ...

htmlcssposition

Similar to the :has() in jQuery, the equivalent in CSS

Consider the code snippet below: <div class="section"> <div class="row">...</div> <div class="row"> <!-- bottom margin here needs to be 0 --> <div class="section"> &l ...

csscss-selectorsparent

Overlapping Bootstrap columns detected when viewing on smaller screens

In an attempt to create a user-friendly layout, I developed two columns: one for the title and another for projects, with the latter being scrollable. The design functions as intended on desktop view but encounters an issue when the viewport is reduced to ...

htmlcssreactjsbootstrap-5

When I click on the md-select element, a superfluous "overflow-y: scroll;" gets added to the <body> of my webpage

Typically, I have the following styles on my body: element.style { -webkit-app-region: drag; } However, when I interact with a md-select element (you can observe this behavior on the provided link), additional styles are applied. element.style { -w ...

javascripthtmlcssangularjsangular-material

Struggling with css margins and div image constraints, seeking guidance and tips for resolution

Struggling with creating a dynamic gallery that works smoothly in jsfiddle but encounters multiple issues when integrated into WordPress. The main problem is the excessive stretching of margins between image titles and meta-data, leading to misalignment an ...

javascriptjqueryhtmlcssmargins

Is there a way to calculate the height of a component that is only rendered conditionally?

I have a scenario where I need to dynamically adjust the height of a component that is conditionally rendered without explicitly setting it. The height should automatically match the size of its content. To achieve this, I am using a reference to determin ...

javascripthtmlreactjsstateref

Having difficulty incorporating a video into the background

After searching online and attempting two different methods, I am still unable to achieve the desired result. I want a video to cover the entire background of my webpage. Here is what I have tried: CSS - video#bgvid { position: fixed; top: 50%; ...

htmlcssvideobackground