How to Make the Height of the Div Dynamically Fit the Size of the Div in Which It Is Contained

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="col-md-10" style="border:0;border-left:7px solid;border-color:red;">            <h4 style="display:block; "><strong>Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name Activity Name </strong></h4>      <p><strong>Salón:</strong> Place Name</p>      <p>00:24 AM - 00:50 PM</p>      <p><strong>Fecha de terminación:</strong> 23-Mar-2019</p>    </div>

Size div height dynamically based on number of divs

The squares are responding correctly because they are being displayed as a table-cell, not because you have explicitly set the width to be 100vw. If these were displayed as block style elements, then the 100vw would mean a single block would span the entire viewport.

I think a better way to do this would be to display the squares as inline-block elements and calculate the explicit width and height based on the user's input.

edit: here's your updated fiddle with my changes following the comments http://jsfiddle.net/2xh2maya/2/

Increasing the height of div dynamically if page width increases

You cant use Js? if you use js its possible with window.innerWidth and assign it to element.
Forexample:

let windowWidth = window.innerWidth;
document.getElementById("myDynamicHeight").style.height = `${windowWidth}px`; 

How can I dynamically change the height of a div to match the size of the div containing it

Something like this would work. You can write an event listener to watch for page resize, of if you're dynamically changing the size of the "parent" div tag, you should just call the js code to resize the child div each time.

HTML:

<div id=div1><div id=div2></div></div>

JS:

div2 = document.getElementById('div2')
div2.style.height = div2.parentNode.offsetHeight+"px"

Make inner div resize to fit its container given dynamic height footer below it

If you use an absolutely positioned div around the content you want to scroll, it will appear to the layout to take up no space, so the other content will win out in a table based layout. You can then use overflow:auto on a wrapper of the absolutely positioned div if there is need of it.

Example :

body, html{
  margin:0;
  padding:0;
}
div{
  box-sizing:border-box;
}
.container{
  height:100vh;
  width:100vw;
  display:table;
  border-collapse:collapse;
}
.tr{
  display:table-row;
}
.td{
  display:table-cell;
  height:100%;
}
.header{
  height:100%;
  border:1px solid green;

}
.wrapper{
  height:100%;
  position:relative;
  overflow:auto;
  min-height:45px;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.footer{
  border:1px solid blue;
}

<div class="container">
  <div class="tr header">
    <div class='td'>
      <div class="wrapper">
        <div class="content">
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
          <p>My content should scroll if I become too small to show all of it</p>
        </div>
      </div>
    </div>
  </div>
  <div class="tr footer">
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
    <p>My height should dynamically change depending on my content</p>
    <p>As a result, my content should never overflow</p>
  </div>
</div>

Fiddle: https://jsfiddle.net/trex005/j7m3yLp7/1/

More details : https://blogs.msdn.microsoft.com/kurlak/2015/02/20/filling-the-remaining-height-of-a-container-while-handling-overflow-in-css-ie8-firefox-chrome-safari/

How to change the height of a div dynamically based on another div using css?

#container-of-boxes {
    display: table;
    width: 1158px;
}
#box-1 {
    width: 578px;
}
#box-2 {
    width: 386px;
}
#box-3 {
    width: 194px;
}
#box-1, #box-2, #box-3 {
    min-height: 210px;
    padding-bottom: 20px;
    display: table-cell;
    height: auto;
    overflow: hidden;
}

• The container must have display:table
• The boxes inside container must be: display:table-cell
• Don't put floats.

---

Related Topics