Tips for positioning a div to match the height of its parent div

How can I make a div stretch to the height of its parent using Bootstrap 3.0.2 without using a script? Check out the fiddle linked below. In this example, I want to stretch the blue container to match the height of the parent green container.

View Fiddle

<div class="row border-green">
    <div class="col-xs-6">
        <div class="border-red">
            aaaa<br>
            bbbb<br>
            cccc
        </div>
        <div class="border-red">
            dddd
        </div>
    </div>
    <div class="col-xs-6 border-blue">
        eeee<br>
        ffff<br>
    </div>
</div>
htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Make sure to assign a class name to the main parent element: same-height

Include the following CSS code in your stylesheet:

.same-height {
    display: flex;
}
.same-height > div {
    flex: 1;
}

http://jsfiddle.net/abc123def/5/

Answer №2

Utilizing flexbox is the ideal solution for resolving your issue. Simply include display: flex in the parent element.

For those currently reading, take a look at the Compatibility table: Can I use Flexbox

For future reference, choosing Flexible box layout is highly recommended!

.border-red {
  border-style: solid;
  border-width: 2px;
  border-color: #FF0000;
}
.border-blue {
  border-style: solid;
  border-width: 2px;
  border-color: #2E2EB8;
}
.border-green {
  border-style: solid;
  border-width: 2px;
  border-color: #00CC00;
}
.equal-height {
  display: flex;
  display: -ms-flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row border-green equal-height">
  <div class="col-xs-6">
    <div class="border-red">
      aaaa
      <br>bbbb
      <br>cccc
    </div>
    <div class="border-red">
      dddd
    </div>
  </div>
  <div class="col-xs-6 border-blue">
    eeee
    <br>ffff
    <br>
  </div>
</div>

Answer №3

To make your codes work, simply add the height property like this:

.border-red {
   border-style: solid;
   border-width: 2px;
   border-color: #FF0000;
 }
.border-blue {
   border-style: solid;
   border-width: 2px;
   border-color: #2E2EB8;
   height: 100%;
}
.border-green{
   border-style: solid;
   border-width: 2px;
   border-color: #00CC00;
   height: 100px;
 }

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

Tips for implementing a CSS Flexbox layout with varying div heights

I am working on a page that features five unique panels, each with its own distinct height and width. I have been considering implementing CSS Flexbox to ensure these panels stack properly as the page becomes responsive. However, one major issue I've ...

htmlcssrubyflexboxhaml

What is the best way to position HTML labels with CSS3 flexbox?

Check out my codepen to see what I need by clicking on this link: https://codepen.io/tbellmer/pen/RdxBdQ I am new to this and although the form works, I require help with the design. I want both the Action: and Comment: labels to be aligned to the right. ...

htmlcssflexboxlabelalignment

Prevent input element from being included in tab order in Internet Explorer

I’m facing an issue in my Single Page Application built with vue.js. I have a checkbox that needs to be invisible for UX reasons, so I set its opacity to zero. However, even with tabindex set to -1, the input element is still included in the tab order ...

htmlvue.jsaccessibility

Need help automating clicking the download csv button with Selenium Python, but the button's class name changes when it's hovered over?

While attempting to save a csv file by clicking the download csv button on a website, I encountered an issue. It seems that the .click() action is not functioning as expected, and upon inspection, I noticed that the class-name of the button changes from &a ...

pythonhtmlseleniumcsvgoogle-colaboratory

How can we add a class to a radio button using jQuery when it is checked, and remove the class when it

I'm looking for help with using jQuery to toggle between two radio buttons and display different divs based on the selection. jQuery(document).ready(function($) { if ($('#user_personal').is(':checked')) { $('.user_co ...

javascriptjqueryhtmlcss

Variations in CSS Stylesheets for Various Parts of the Body

Currently, I am in the process of creating a single page website. One issue that I have encountered is needing a Bootstrap "modal" class popup to appear when a button is clicked. However, the template I am utilizing was designed using Bootstrap Version 1, ...

csstwitter-bootstrapmodal-dialogtwitter-bootstrap-3stylesheet

Utilizing Angular to Handle Undefined Variables in String Interpolation

Seeking a way to showcase data obtained from an external API on a webpage using Angular's string interpolation. If no data is retrieved or is still pending, the aim is to display 'N/A'. An attempt was made following this method, but encoun ...

htmlangulartypescript

Steps for assigning innerHTML values to elements within a cloned div

Currently, I am setting up a search form and I require dynamically created divs to display the search results. The approach I am taking involves: Creating the necessary HTML elements. Cloning the structure for each result and updating the content of ...

javascriptjqueryhtml

What is the best method for generating a vertical tab using JavaScript in a paragraph format?

Struggling to create a menu similar to this using bootstrap 4. Despite my efforts, I keep encountering various issues. Is there someone who can help me solve this problem? Remember, I am using bootstrap 4. Here is a demo: <!doctype html> <html ...

javascripthtmlcssresponsive-designbootstrap-4

Is the button failing to direct you to the intended destination?

I'm facing an issue with a button tied to a JavaScript function using onClick(); My interface allows me to ban players on a game server, but when I select anyone here: https://i.stack.imgur.com/kcE1t.png, it always selects wartog for some reason. In ...

javascriptphphtml

Learn how to assign an image to a div element when it is collapsed, and then reveal the content when clicked on to expand

I am working on a three div with expand collapse functionality. When I expand one div, I want to set some image to the other divs. And when I go back to normal mode, I need the original content that was inside each div. $("a.expansion-btn").click(functi ...

javascriptjqueryhtmlcssangularjs

Ignoring CSS transitions by changing the width property in JavaScript’s element.style

When attempting to create a smooth progress bar animation by adjusting the width using document.querySelector('#mydiv').style.width = '20%', I noticed that the new width is updated instantly rather than transitioning smoothly. It seems ...

javascriptcss

Having trouble with clicking on an icon link within a list

Seeking assistance with creating a social media icon/link list for the first time on this platform. Any help is appreciated! <div class="social-links"> <ul> <li class="m-link"> <a href="&q ...

htmlcsshovericons

What is the best approach for adding text to an image using TCPDF?

I am trying to create dynvouchers PDF using TCPDF. However, I am facing an issue where the PDF generated does not include the username and password. Here is my code: $html = ''; $html .= '<table><tr>'; for ($a = 1; $a <= ...

phphtmlpdftcpdf

What are some ways I can customize the appearance of a Bootstrap 5 Navbar specifically when it is in the collapsed

Currently utilizing Bootstrap 5, my goal is to align the Navbar social icons to the left when the navbar is collapsed for small/mobile devices, and to the right when viewed on a larger screen. Can you assist in identifying which selectors need styling for ...

htmlcsstwitter-bootstrapnavbarbootstrap-5

"Enhancing user experience with jQuery hover effects on table

This is an example of the HTML structure: <tr class="row-1 row-first"> <td class="col-1 col-first"> <div class="views-field views-field-field-logo-image"></div> <div class="views-field views-field-field-logo-title"> ...

jquerycsshtml-table

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? https://i.sstatic.net/euoNI.png I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Boostrap-5 carousel seems to be malfunctioning and not functioning correctly

I've been teaching myself how to construct websites using tutorials and other resources. I'm currently diving into the world of Bootstrap, but I'm having trouble with the carousel feature. No matter how much I try, the slides get stuck on th ...

htmlxcodeperformancecarouselbootstrap-5

What is the best way to create titles with a background?

My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example: I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed. ...

javascripthtmlcss

Wordpress problem with Bootstrap JavaScript code involving data-toggle="collapse"

Currently facing an issue with my project. This is my first attempt at creating a WordPress blog, inspired by the HTML site www.humantools.com.mx and building a blog for it at www.humantools.com.mx/blog. There's a strange problem: when logged in, the ...

javascriptjquerycsswordpresstwitter-bootstrap