Responsive height layout with dynamic height elements
Just use flex properties all the way through:
body { display: flex; flex-direction: column; height: 100vh; margin: 0;}
.menubar { flex: 0 0 50px; border: 1px solid black;}
.main-section { flex: 1; display: flex; flex-direction: column; border: 1px solid black; margin-top: 20px; padding: 25px;}
.searchbar { flex: 0 0 50px; margin-bottom: 20px; border: 1px solid black;}
.section-content { flex: 1; display: flex; flex-wrap: wrap;}
.sidebar { flex: 0 0 25%; border: 1px solid black;}
.results-table { flex: 1; border: 1px solid black;}
* { box-sizing: border-box;}
<div class="menubar">menu bar</div><div class="main-section">main container <div class="searchbar">search bar</div> <div class="section-content"> <div class="sidebar">side bar</div> <div class="results-table">results table</div> </div></div>
how do I give a div a responsive height
I know this is a little late to the party but you could use viewport units
From caniuse.com:
Viewport units: vw, vh, vmin, vmax - CR
Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).
Support: http://caniuse.com/#feat=viewport-units
div {/* 25% of viewport */ height: 25vh; width: 15rem; background-color: #222; color: #eee; font-family: monospace; padding: 2rem;}
<div>responsive height</div>
CSS responsive div, when height is set in pixels
This link describes it perfectly.
You need to find your aspect ratio of your desired element. In your case it seems to be 640 by 200, which makes your aspect ratio have a percentage of 62.5%. (I only say this because the background image you're using is 640x200)
Using the code in the link provided, you just need to give your container a width, add a pseudo element of :before
to it and give the :before
a padding-top
of 62.5%
. Then you need to position your container absolutely inside of it.
So your container will need a few things on it. First of all, use box-sizing:border-box;
whenever you have padding or borders to deal with, then give it a position of relative
.container {
width:100%;
border:10px solid red;
position:relative;
box-sizing:border-box;
}
After that, you need to add a :before
pseudo element to it. This will take the given width of it's container (which is 100%) and use the padding-top
to make the height a ratio of the width:
.container:before {
content:"";
display:block;
padding-top:62.5%;
}
After that, you just need to make sure your contents inside are positioned absolute
and are 100% width and height.
.inner
{
width:100%; height:100%;
background:url('http://p1.pichost.me/640/1/1236135.jpg') no-repeat;
-webkit-background-size:100%;
-moz-background-size:100%;
-o-background-size:100%;
background-size:100%;
text-align:center;
font-size:40px; color:#fff;
position:absolute;
top:0;
left:0;
}
Here's the fiddle demonstration
http://jsfiddle.net/bcbvLLrc/
A suggestion I would make is to make another div just inside your container called .content
then give these styles to content:
.content {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
This will make sure the content is the full size of your container, then you can style anything inside the content however you would like, for example, you can place extra columns or rows in your content without having to worry about anything overflowing anywhere.
Responsive divs width and height with css
Original answer
EDIT 2: Looking at your video I think the new approach is what you are looking for.
You have to display your divs
with .item
class as inline
and remove your white-space: normal
property.
.item {
display: inline;
height:100%;
}
Updated JSFiddle.
Explanation:
I am not an expert of CSS
so if someone see some mistake please correct me.
When you display an element as inline-block
as the official documentation says:
- inline-block
Causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
which means that the element that you display as inline-block
acts like a block but you can set it inline (in the same line). This means that you can set a div (which is display: block
as default) in a single line. You can also see it here:
The div element, short for division, is the block level generic container.
Also, inline
elements cannot get height/width
properties so this is the reason why when you display your divs
with .item
class as inline
, they wrap the content but not get the height/width
that they should correspond to take (from their parents in your case, as you put them with %
).
If you display them as inline-block
it does not changes anything about their default height/width
properties. Just allows you to display them in a single line.
JSFiddle to see the three divs (inline
/ inline-block
/ block
, as default).
Setting width and height attributes on img element on responsive images
Ok, so after quite extensive research and experimentation I've found out that, in truth, it doesn't really matter as long as the aspect ratio is preserved. So the best bet would probably be to use image's original dimensions.
Related Topics
CSS Difference Between 0 and 0Em
Setting CSS Style Attributes with Thymeleaf
In ASP.NET.Mvc, What Is the Correct Way to Reference Images Inside of CSS
100% Width Divs Not Spanning Entire Width of the Browser in Webkit
Web Extension:How to Use "Browser_Style = True"
Why Do Fixed Elements Slow Down Scrolling in Firefox
Which CSS Pseudo-Classes Don't Have Specificity
Angular Incorrect Margin-Left Applied to Sidenav Content
Decrease the Tabs Bar Height in Gnome Terminal
Tools Debugging CSS in Internet Explorer
CSS - How to Select Multiple Different Child Elements Within a Parent Without Repeating the Parent
How to Load CSS File Dynamically
Remove Padding from Unordered List
Browser as a Design Tool - Change Colors, Save Them
Using a Different Font with Twitter Bootstrap
How to Fix Inconsistent Textarea Bottom Margin in Firefox and Chrome
Take 2 Columns in 2-Columns Layout But Not When 1-Column Layout in CSS Grid Without @Media