Ways to ensure the row occupies the entire height available

I am attempting to create a layout that consists of:

  • A row with a fixed height of 3em
  • A second row that will expand to take up the remaining available space, anywhere from almost 100% to 0%
  • A third row with a fixed height of 3em

My goal is to achieve a similar design to the Github project view, where the space for tasks/issues dynamically changes in height, but the header and add item button always have a fixed height:

https://i.sstatic.net/YTy7k.png

https://i.sstatic.net/HBVXu.png

https://i.sstatic.net/WwRgZ.png

https://i.sstatic.net/qBRvV.png

The issue I am facing is that while working on this project mainly as a backend endeavor, my frontend skills are not as strong. This has resulted in some errors and difficulty expressing my exact problem. The solution I tried (which did not work) looked like this:

.issue-board .state-column {
  background-color: aquamarine;
  min-width: 15em;
  max-width: 15em;
}

.issue-board .state-column-header {
  background-color: azure;
  height: 3em;
}

.issue-board .state-issues {
  background-color: beige;
  height: 80%;
  overflow: auto;
}

.issue-board .state-add-issue {
  background-color: bisque;
  height: 3em;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b2bfbfa4a3a4a2b1a090e5fee2fee2">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="col-3 state-column border-1 border-primary h-100">
  <div class="container-fluid h-100">
    <div class=" row flex-shrink-0 state-column-header border-bottom border-primary justify-text-center m-2">
      <div class="col">
        <h3>New</h3>
      </div>
    </div>
    <div class="row flex-shrink-1 state-issues">
      <div class="col overflow-auto">
        <ul>
          <li>dsafadsf</li>
        </ul>
      </div>
    </div>
    <div class="row flex-shrink-0 state-add-issue">
      <div class="col">
        <button class="btn">Add Item</button>
      </div>
    </div>
  </div>
</div>

<div class="col-3 state-column border-1 border-primary h-100">
  <div class="d-flex flex-column h-100">
    <div class="flex-shrink-0 state-column-header m-2">
      <h3>New</h3>
    </div>
    <div class="flex-shrink-1 state-issues">
      <ul>
        <li>dsafadsf</li>
      </ul>
    </div>
    <div class="flex-shrink-0 state-add-issue">
      <button class="btn">Add Item</button>
    </div>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

When trying to ensure a row takes up the full height, the main issue often lies with its parent element not having a defined height. The best approach is to design a layout that considers the sizes of all elements and allows the main container's height to adjust based on other components present. To achieve this, set the display property of your container to flex with an "align-items: stretch;" declaration, ensuring that the child elements fill the available height.

Below is a simplified example demonstrating one way to implement this:

body {
    margin: 0;
    background-color: #0E1117;
    color: #fff;
    font-family: sans-serif;
}
header {
    padding: 20px;
}
h1 {
    font-size: 20px;
    margin: 0;
}
.container {
    height: calc(100vh - 160px);
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 50px;
}
.item {
    background-color: #020408;
    border: 1px solid #13161C;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    width: 300px;
}
.item > div {
    flex: 1;
    overflow-y: scroll;
}
button {
    all: initial;
    color: #727982;
    font-family: inherit;
    cursor: pointer;
}
<header>
    <h1>A header</h1>
</header>
<div class="container">
    <div class="item">
        <h3>No Status</h3>
        <div></div>
        <button>+ Add card</button>
    </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

How do you vertically span a grid element across 3 rows using Material UI?

This particular scenario may appear to be straightforward, but the official documentation of Material UI lacks a clear example on how to achieve this. Even after attempting to nest the grid elements, I encountered an issue where the grid element on the ri ...

javascripthtmlreactjsmaterial-ui

Retrieve a specific choice from a radio button and store it in a MySQL database

I need assistance with extracting the value from a selected radio button and inserting it into MySQL database. Although I have tried using isset(), I am facing issues when trying to retrieve the chosen radio button. Could someone please lend a hand? < ...

phphtmlmysqlforms

Achieving Equal Column Height and Proper Margins in Bootstrap 4: A Comprehensive Guide

I am looking to enclose my elements in a rectangular container with rounded borders and a box shadow, while ensuring they have consistent height and are responsive (this is why I do not define max height or height directly) Here's the desired end res ...

htmlcssbootstrap-4

Experience the innovative feature of React Splide Carousel where a peek of the next image is shown until you reach

My current challenge arises when I reach the last slide in the slider. I am trying to prevent it from looping and instead stop with no extra space or any other images peeking out. To address this, I have utilized the padding: '5%' option, which ...

javascriptcssreactjssplidejs

What are the methods for differentiating between a deliberate user click and a click triggered by JavaScript?

Social media platforms like Facebook and Twitter offer buttons such as Like and Follow to allow users to easily engage with content. For example, on Mashable.com, there is a Follow button that, when clicked, automatically makes the user follow Mashable&ap ...

javascripthtmlfacebook

Change the color of the Parent Menu when a childMenu is clicked on using CSS and HTML

<li class="btn-group" mdbDropdown> <a mdbDropdownToggle id="ParentId"> <i class="nav-item"></i> MainMenu <i class="fa fa-angle-down"></i> </a> <div class=" ...

htmlcssangularbootstrap-4scss-mixins

Having difficulty customizing the background color of a navbar using CSS in Bootstrap 5

I've been attempting to customize the color of the navbar using a custom CSS code, but unfortunately without success. I've searched through various resources and tried different class names like navbar, navbar-custom, and more, but none seem to w ...

htmlcssbootstrap-5

"By selecting the image, you can initiate the submission of the form

I am trying to figure out why clicking on the image in my form is triggering the form submission by default. Can someone please provide guidance on this issue? <form name="test1" action="er" method="post" onsubmit="return validateForm()" <input ty ...

javascripthtmlforms

The database is being populated with the default value

Users can input text in this text area. The onblur and onfocus functions are used to prevent default text from being displayed when the user clicks on it. A default message is provided, but there seems to be an issue where both the default value and the us ...

phphtml

Chrome is having trouble displaying Roboto font correctly

I have been experiencing an issue with the rendering of the Roboto font on a client's website. When I view the site in Chrome (version 43.0.2357.65 m), all the different weights of Roboto appear to look the same. For example, here is a comparison: On ...

htmlcssgoogle-chromewebroboto

JavaScript click event not triggering on ASP.NET button

Currently, I am attempting to invoke a C# function from JS without using ajax. One approach I have tried is creating an ASP.NET button that, when clicked, calls the C# function and triggers the click event from JS: In the HTML section: <asp:Button run ...

javascriptc#htmlasp.netclick

What could be causing my Bootstrap accordion to malfunction?

Currently, I am in the process of constructing a website using Bootstrap 4. I have incorporated 3 individual <div> elements, each containing an accordion. These <div> sections are assigned their own unique id to facilitate the showing and hidin ...

javascripthtmlbootstrap-4accordion

I am experiencing difficulty getting my CSS styles to apply to my application that is being rendered using zappa, express, and node.js

Here is a link to my code: http://pastebin.com/jcLRCrQr Although everything else seems to be working fine - CSS sheets loading correctly, JavaScript files functioning properly - I am facing an issue where the styles are not being applied. An odd thing I ...

cssnode.jscoffeescriptexpresszappa

What are the best techniques for creating a responsive UI design that adapts to all screen widths?

I created a UI by following some tutorials, but I'm facing an issue with responsiveness. When I resize the window, the UI doesn't look good or adjust properly. Here is the link to my fiddle: http://jsfiddle.net/X8HV9/1/show/ I am encountering tw ...

javascriptjquerycssjquery-mobile

Enhance your design with a Bootstrap 5 card featuring interactive tabs and engaging

I'm attempting to achieve a specific effect using Bootstrap 5 and implementing it within a Bootstrap Card. The initial attempts were made without the cards. Initial Attempt Without Cards: I have directly copied the example provided in the link https: ...

twitter-bootstrapbootstrap-5

How can I assign a unique background color to each individual column within a RadioButtonList?

I have an issue with setting 3 repeated columns. I want to assign different background colors to each of them. If you have any ideas on how I can achieve this, please share. Here is the code for my RadioButtonList: <asp:RadioButtonList ID="rblTimeSlot ...

javascriptc#asp.netcssradiobuttonlist

Using SVG as a background image on Internet Explorer with zoom capabilities

I am having an issue with my SVG used as a background image: <div class="bubble"></div> Here is the CSS I am using: .bubble { background-image: url(https://beta.creasoft.cz/Images/bubble-small.svg); background-repeat: no-repeat; width ...

cssinternet-explorersvg

Managing web-based PDF documents with images that require authentication

Currently, I am generating PDF documents on the server side using wkhtmlpdf and nodejs. The HTML to be rendered is sent from the client side, which may contain img tags with a source. When the user previews the HTML in the browser, the images they have upl ...

htmlnode.jsauthenticationpdfwkhtmltopdf

Easiest Method for Expressing Mathematical Fractions

Math equations are an important aspect of my work, and I often use MathJax as a tool to create professional-looking formulas (check out more about it here). It basically functions like an html language. <script type="text/javascript" src="http://cdn.ma ...

htmlmathjax

Combining td elements within a table

Currently, I am working on creating a weekly calendar using a combination of JavaScript and PHP to interact with an SQL table. The process involves generating an empty table structure in JavaScript and then populating specific cells with data retrieved fro ...

javascriptphphtmlhtml-table