Setting Element Height in Responsive Layout

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



Leave a reply



Submit