What is the best way to adjust row height to fill the remaining space in the container?

Below is the code snippet:

<!doctype html>
<html lang="en" class="h-100">
<head>
<!-- Required meta tags -->
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8c938c8c998ed2968fbccdd2cdcad2cc">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous></script>
<style>
video{
object-fit:cover;
}
</style>
</head>
<body class="container-fluid p-1 h-100">
<div class="container-fluid h-100 border border-primary p-1">
<div class="row border border-danger h-50 p-0 no-gutters">
<div class="col p-0 position-relative">
<video id="selfView" class="h-100 w-100 position-absolute" controls></video>
</div>
</div>
<div class="row p-0 border border-danger no-gutters d-flex flex-row">
<div class="d-flex flex-row justify-content-center col p-1 border border-success">
<div class="btn-group-toggle p-1" data-toggle="buttons">
  <label class="btn btn-sm btn-lg btn-success">
Share Video:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareVideo" checked>
  </label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
  <label class="btn-sm btn btn-lg btn-success">
Share Audio:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareAudio" checked>
  </label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
  <label class="btn-sm btn btn-lg btn-danger">
Share Screen:<span class="badge badge-danger">Off</span>
<input type="checkbox" id="shareScreen">
  </label>
</div>
</div>
</div>
<div class="row no-gutters d-flex justify-content-center border border-success p-1">
<div class="col p-0 d-flex flex-row justify-content-center">
<button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
</div>
</div>
<div class="row no-gutters d-flex justify-content-center border border-warning p-0 flex-grow-1 flex-shrink-0">
<div class="col p-0 d-flex flex-row justify-content-center overflow-auto">
dds
</div>
</div>
</div>

</body>
</html>

I have included both "flex-grow-1" and "flex-shrink-0" classes to the row.

However, it seems like the yellow bordered row does not expand its height to fill the remaining space within the container.

As a novice in bootstrap, I wonder if there are settings that need adjustment?

cssbootstrap-4flexbox

Answer №1

After several attempts, I have finally discovered the solution:

<!doctype html>
<html lang="en" class="h-100">

  <head>
    <!-- Necessary meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f1eef1f1e4f3afebf2c1b0afb0b7afb1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <style>
      video {
        object-fit: cover;
      }

    </style>
  </head>

  <body class="container-fluid p-1 h-100">
    <div class="container-fluid h-100 border border-primary p-1">
      <div class="row border border-danger h-50 p-0 no-gutters">
        <div class="col p-0 position-relative">
          <video id="selfView" class="h-100 w-100 position-absolute" controls></video>
        </div>
      </div>
      <div class="row border border-info p-0 no-gutters h-50 ">
        <div class="col border border-warning p-0 d-flex flex-column">
          <div class="row border border-dark p-0 no-gutters">
            <div class="d-flex flex-row justify-content-center col p-1 border border-success">
              <div class="btn-group-toggle p-1" data-toggle="buttons">
                <label class="btn btn-sm btn-lg btn-success">
                  Share Video:<span class="badge badge-success">On</span>
                  <input type="checkbox" id="shareVideo" checked>
                </label>
              </div>
              <div class="btn-group-toggle p-1" data-toggle="buttons">
                <label class="btn-sm btn btn-lg btn-success">
                  Share Audio:<span class="badge badge-success">On</span>
                  <input type="checkbox" id="shareAudio" checked>
                </label>
              </div>
              <div class="btn-group-toggle p-1" data-toggle="buttons">
                <label class="btn-sm btn btn-lg btn-danger">
                  Share Screen:<span class="badge badge-danger">Off</span>
                  <input type="checkbox" id="shareScreen">
                </label>
              </div>
            </div>
          </div>
          <div class="row border border-dark p-0 no-gutters">
            <div class="col p-1 d-flex flex-row justify-content-center">
              <button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
            </div>
          </div>
          <div class="row border border-dark p-0 no-gutters flex-grow-1 position-relative">
            <div class="col p-0 border border-secondary position-absolute h-100 overflow-auto">
              sdfsdf<br>
              sdfsdf<br>
              sdfsdf<br>
              sdfsdf<br>

              sdfsdf<br>
              sdfsdf<br>
              sdfsdf<br>
              sdfsdf<br>

              sdfsdf<br>
              sdfsdf<br>
              sdfsdf<br>
              sdfsdf<br>

              sdfsdf<br>
              sdfsdf<br>
              sdfsdf<br>
              sdfsdf<br>
            </div>
          </div>
        </div>
      </div>
    </div>
  </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

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

When I try to make my mobile navbar full screen on a mobile device, the hamburger button works as expected when clicked. Initially, all the links are displayed in full page view, but once I click on a link, it disappears and takes me to the respective sect ...

javascripthtmlcss

Achieving targeted text display on specific viewports using the visible class in Bootstrap

I've recently delved into learning Bootstrap, and I'm experimenting with creating a responsive page where certain divs will only be visible on specific viewports. I used classes like visible-xs, visible-sm, visible-md, and visible-lg for the diff ...

htmlbootstrap-4

HTML5: Caption for Images: Movement of Image to Following Row

I'm currently working on designing an image gallery and I've encountered an issue with displaying captions below the images. Here's the code I'm using: <div> <figure> <img src="sample-image.png" /> <figcaption> ...

htmlcss

How to perfectly center a background image using CSS

I am currently working on a project that involves using a background image. However, I am facing some difficulties in trying to fully center the image, similar to what is shown in this My objective is https://i.sstatic.net/XUNTy.png What I have achieved s ...

javascripthtmlcssuser-interfacesass

Enhancing the appearance of dropdown menus for WooCommerce Variable products with custom CSS styling

I currently have a Wordpress website with WooCommerce and several variable products. Each product's variation has a dropdown menu that displays different options when clicked. My main concern is how to customize the appearance of these dropdown menus ...

javascriptcssajaxwordpresswoocommerce

Improving code quality and consistency in Javascript: Tips for writing better code

Hey, I've been experimenting with some code using ajax and have ended up with a lot of repetitive lines. Is there a way to streamline the code without losing functionality? I keep using the .done method multiple times when I could probably just use it ...

javascripthtmljquerycss

Modify CSS class if the window size is smaller than specified value

Is there a way to modify the attributes of a CSS class if the browser window is less than 600px in height? The current default properties are as follows: .side { height:400px; width:700px; } I am looking to update it to: .side { height:300px; width:550p ...

javascriptcss

Bulma inquired, "What is the best way to position a button at the center of a

<div class="container"> <button class="btn">Click me</button> </div> <button class="is-centered"> seems to be malfunctioning. ...

htmlcssbulma

CKEditor's height automatically increases as the user types

I am using a ckEditor and looking for a way to make its height automatically grow as I type. https://i.stack.imgur.com/m7eyi.png <textarea name="description" id="description"> </textarea> <script> CKEDITOR.replace( 'description ...

javascriptcssckeditorckeditor4.x

Calendar toggle appearing behind modal

Hey there, I'm currently facing an issue with my view using Angular 4 and Bootstrap 4. Whenever I click on "open" to display the calendar, it's appearing behind my modal. Unfortunately, I am unable to access the class as it's auto-generated. ...

angularcalendarbootstrap-4bootstrap-modalbootstrap-datepicker

Is an image with solid colors placed on top of a see-through banner and

I'm facing an issue where my image, despite being set to 100% opacity, appears partially transparent and shows the banner and background image behind it. How can I resolve this problem? Below is the snippet from my style sheet: #banner{ width:12 ...

csshtmlopacity

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

I'm currently facing an issue with two div elements on my webpage. I want only one of them to be visible at a time, depending on which key is pressed. If the 1 key is pressed, I want 'div1' to fadeIn (if it's not already visible) and fo ...

javascriptjqueryhtmlcss

Transforming the pen into a creative assortment of animated social media icons for top-notch production

My goal is to incorporate animated social media icons on my website using only CSS without any JavaScript. I came across a pen called "Yet Another Set of Animated Social Icons" that I'm attempting to modify. The issue at hand is that instead of the c ...

htmlcssbrowser

What is causing my background image to move upward when I include this JavaScript code for FlashGallery?

There's an issue on my website where adding a flash gallery script is causing the background image to shift unexpectedly. You can view the affected page here: The culprit seems to be the "swfobject.js" script. I've identified this by toggling t ...

javascripthtmlcssflash

Footer div is being covered by the page

I am currently working on a website built with "WordPress", and I have implemented a mobile footer plugin that is designed to only appear on mobile devices. However, I am encountering an issue where the page content overlaps the footer on phones. I attemp ...

javascriptjqueryhtmlcsswordpress

Ensure portrait orientation images have a restricted width to maintain their aspect ratio

On a responsive site, I have set up flexslider to showcase both landscape and portrait orientation images. The smoothHeight: true option is enabled to adjust the height according to the images. However, at the largest media query where the flexslider cont ...

jquerycssflexslider

Ways to make a background stretch infinitely in the x-axis

Currently, my header has a grey background with a width of 100% and a maximum width of 1000px. To extend the grey background beyond the 1000px limit, I have a separate div with an absolute position behind the header div. The issue arises when the user scro ...

htmlcssbackgroundrepeat

Identifying CSS div tags in CakePHP with unique class names

After running cake bake, a test installation was created resulting in the Product Controller and its associated views such as index.cpt, add.cpt, edit.ctp, etc. Upon inspecting the CSS file linked to these views, I noticed two specific divisions: action an ...

htmlcsscakephp

Show the logo next to the user's login information

I've been grappling with this issue for quite some time now and I'm on the verge of giving up. What I'm attempting to accomplish is to have the logo display in a float-left position while also having the user welcome message displayed in fl ...

htmlcss

Using CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: https://i.sstatic.net/z06qO.png Current Situation: #newOrderControl { border-style: solid ...

htmlcss