Bootsrap Fixed & Resppnsive div height - html

I would like to have a fixed responsive div height.
Here is the example:
<div class="col-md-12">
<div class="col-md-8"> //here there is an Image with 800px height </div>
<div class="col-md-4" style="background:#eee">
<div class="col-md-12" style="background:black">
//here there is text and height = 350px height
</div>
</div>
</div>
I would like to fix the height of my black div as the height of my image. Also i would like to make it responsive..

Use flex.
align-items: stretch; stretch items to its parent height and flex-wrap: wrap make it wrap.
See preview in codepen:
Preview

Related

How the width of a inline-flex div is decided?

for an inline-flex div, the width is depending on its children elements' width. Here is the code, I don't set the parent div with specified width. So, it is decieded by inside elements.
For the three children elements, one is with width:50%, others are width:50px, but the final width for 2 is 31.75, how does it come?
<div style="display: inline-flex;flex-wrap: nowrap;">
<div style="width:50%;color:red">1</div>
<div style="width:50px;color:blue">2</div>
<div style="width:50px;color:black">3</div>
<span>hello</span>
</div>
Here is a step by step illustration to understand what the browser is doing:
div div {
outline:1px solid green
}
<p>The browser will first ignore the width:50% and use auto instead</p>
<div style="display: inline-flex;flex-wrap: nowrap;border:2px solid red">
<div style="width:auto;color:red">1</div>
<div style="width:50px;color:blue">2</div>
<div style="width:50px;color:black">3</div>
<span>hello</span>
</div>
<p>Now that we have the width of the parent, it will no more change and we resolve width:50%</p>
<div style="display: inline-flex;flex-wrap: nowrap;border:2px solid red">
<div style="width:50%;color:red">1</div>
<div style="width:50px;color:blue">2</div>
<div style="width:50px;color:black">3</div>
<span>hello</span>
</div>
<p>all the div will shrink because there is not enough space for them (50% + 50px + 50px + hello > 100%). A shrink that you can disable if you use flex-shrink:0 and you will have overflow</p>
<p>Only "hello" will not shrink because a flex item cannot shrink past its content size</p>
<div style="display: inline-flex;flex-wrap: nowrap;border:2px solid red">
<div style="width:50%;color:red;flex-shrink:0;">1</div>
<div style="width:50px;color:blue;flex-shrink:0;">2</div>
<div style="width:50px;color:black;flex-shrink:0;">3</div>
<span>hello</span>
</div>
For more detail about the shrink algorithm if you want to understand the calculation:
How flexbox calculates flex-item's width if no flex-basis or width are set?
Why is a flex item limited to parent size?
To understand why "hello" will not shrink:
Why don't flex items shrink past content size?
The purple area you see in the dev tools is the width before the shrink effect. You can notice it's equal to 50px for the 2nd and 3rd div

Flexbox, limit images heigh/width within space available

I have a fixed size wrapper consisting of:
Header that is sized to the whats inside
Footer that is fixed size
Content container that should use the remaining space of the wrapper
The problem occurs with images. I would like for images to resize to fit the content container both in height and width. Right now images overflow the wrapper in height.
Here is the code. The wide image is acting correct, resizing to fit, but the long giraf is not.
In the following fiddle overflow is set to scroll to debug. The endgoal is no overflow.
https://jsfiddle.net/sghp68r0/
A not so flexible solution would simply be to give the imageFit class a height like
img {
max-width: 100%;
max-height: 100%;
}
.imageFit {
object-fit: contain;
height: 150px;
}
But this I would rather avoid hardcoding the height.
My goal is that it looks like this (no overflow):
if i am right you want this. Please do let me know.
Drag the height in fiddle you see the images are adjusting with heigh.
Here is my fiddle link:-
https://jsfiddle.net/exa3y7w9/
<div class="wrapper">
<div class="header">
Sized to content <br />
Sized to content <br />
</div>
<div class="content">
<div class="imageWrapper">
<img src="https://cdn.pixabay.com/photo/2017/10/10/22/24/wide-format-2839089_960_720.jpg">
</div>
<div> 2 images and some text that fills remaining space </div>
<div class="imageWrapper">
<img src="http://clipart-library.com/data_images/258951.jpg">
</div>
</div>
<div class="footer">
There is some text in fixed size container
</div>
</div>
So apparently you can fix overflow in flexbox by setting height of the containing div to 0 (for safari it should be min-height: 0). Have a look at this example. If you remove height breaks.
https://jsfiddle.net/oz20qgw9/
.content {
background-color: green;
flex:2;
height: 0; //THIS IS THE KEY!
}

CSS height 100% makes element height more than 100% [duplicate]

This question already has answers here:
Why does height 100% work when DOCTYPE is removed?
(5 answers)
Closed 5 years ago.
The following HTML is simple and does what I want. The green body stretches downward to fill the window.
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1">
This is the body.
</div>
</div>
</body>
But if I replace that body text with some flex columns, and I give them height:100% because I want them to stretch to the bottom, the newdiv actually gets a height greater than 100% of it's container and causes everything to scroll. Why doesn't 100% mean 100% here?
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1">
<!-- The new part -->
<div id='newdiv' style="display:flex;flex-direction:row; height:100%">
<div style="background:#ffd0d0"> Col 1 </div>
<div> Col 2 </div>
</div>
</div>
</div>
</body>
The reason you're getting the vertical scrollbar is because you're telling the div parent of col1 and col2 to be height: 100%. This by itself gives it the full height of the viewport.
From your code:
<div id='newdiv' style="display:flex; flex-direction:row; height:100%">
<div style="background:#ffd0d0"> Col 1 </div>
<div> Col 2 </div>
</div>
Except this div has a sibling: the header div, which is also taking up space.
So when the browser does it's height calculation, here is the result:
100% + (computed height of header div) > viewport height = vertical scrollbar
Instead of using defined heights, consider letting flexbox do the work. By default, flex items expand the full length of the container along the cross-axis.
So by simply declaring display: flex, child elements will expand to fill all available space (with no vertical scroll). But since a height rule will override this flex setting, we need to remove height: 100% from any flex items.
html, body { height: 100%; }
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1; display: flex;"><!--adjustment here-->
<div id='newdiv' style="display:flex;"><!--adjustment here-->
<div style="background:#ffd0d0; display: flex;"> Col 1 </div>
<div> Col 2 </div>
</div>
</div>
</div>
</body>
There are two adjustments to the original code.
added display: flex
removed height: 100%
Fiddle Demo
I would do it like this. demo
<body>
<header>Header</header>
<div class="body">
<aside>abc</aside>
<div class='inner'>content here</div>
</div>
</body>
In your css
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
.body{
flex-grow:1;
display: flex;
align-items: stretch;
}
.inner{
flex-grow: 1;
}
and this gives you a better html structure and maintainability
What about this? - http://codepen.io/arianalynn/pen/WragJP?editors=1010
<style>
body, html {margin:0;height:100%;width:100%;padding:0}
</style>
<body>
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1;display:flex;flex-direction:row; height:100%;-webkit-align-items:stretch">
<div style="background:#ffd0d0"> Col 1 </div>
<div style="background:red"> Col 2 </div>
</div>
</div>
</body>
I have updated your code try if this helps you.
set the height to
100vh https://jsfiddle.net/ok20071g/1/

How to set up a height for a <div> in responsive css designs?

I am trying to make a responsive website. My issue is if i am not setting a div height then the bottom of the div content has come up and overlay with the top div contents. Also if I sets a height, when i see it in responsive it takes the full height and show white space. Can you guys please sort it out?
You want something like this:
<div style="height:20%"> CONTENT </div>
or
<div style="height:40px"> CONTENT </div>
use % to specify the amount of space your div will get in your current container or px for the number of pixels
http://www.w3schools.com/cssref/pr_dim_height.asp
Friends, this is my sample coding
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
CSS part:
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
For mobile responsive, I want to hide the right banner div so I did 'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect of other divs.

Overlaying an item on top of something with display: table-cell and min-height

When using display: table-cell it's not possible to give that element position:relative. So in order to overlay the entire element with something (e.g a translucent div) you first have to wrap the contents in a div with position:relative and then put the overlay inside there.
But when I set a minimum height on the wrapper too then the overlay doesn't extend to the full height and I can't seem to find a way to make the wrapper's contents height-aware. Is there away, using just css, to have a 100% height overlay on top of a div with display:table-cell and minimum height?
<div style="table-row">
<div style="table-cell; min-height: 100px">
<div style="position: relative; height: 100%;"> // this refuses to extend to 100% height when the table row forces the cell height to grow
<p> content </p>
<div style="position:absolute; top:0;left:0;height:100%;width:100%"> // ... therefore so does this
</div>
</div>
</div>
<div style="table-cell; height: 150px"></div> // forces the entire row to grow in height
</div>