How can I make the height of the div dynamically fit the size of the div in which it is contained?
Instead adding a DIV
with float
add border to your outer DIV
like below.
<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
Failed to Load Resource: the Server Responded With a Status of 404 (Not Found) CSS
Multiple Span Tags Under a Div Add Extra Spaces
How to Type Text With Hat "^" in HTML
Angular - Show Empty Row by Default in Drop Down List and Disable Button
Angular 5, Html, Boolean on Checkbox Is Checked
First Name Validation Using HTML 5 Pattern
Bootstrap Accordion Issue With Arrow
Chrome Ignores Autocomplete="Off"
Auto Detect Mobile Browser (Via User-Agent)
How to Style the Parent Element When Hovering a Child Element
In Angular 4, How to Dynamically Set Min Date and Max Date in Date Picker
Space Between Navbar and the Content
Preventing Overlap of Multiple Fixed Positioned Elements
How to Disable Hover Effect for Active Link
How to Vertically Align Text in Input Type="Text"
Multiple Select Dropdown Not Working With Ng-Option
Why Is There an Unexplainable Gap Between These Inline-Block Div Elements