how do I give a div a responsive height

Question

I m stating to learn responsive design  but there s one thing I can t seem to figure out  so far     Here s a working example  http   ericbrockmanwebsites com dev1   I d like the div element  contactBg  with text inside of it to come down to the bottom of the image to the left  Obviously I can do that by defining the height in px  but then that height is maintained when the rest of the window resizes instead of being fluid   If there are any good articles out there you may know of that explains how to do this  that would be very helpful  thanks   Here s the mark up     lt div class  row-fluid  gt           lt div class  span10 offset1  gt               lt div class  container-fluid  gt                   lt div class  row-fluid  gt                       lt div class  span5  gt                           lt img src  images logo jpg  alt  logo    gt                           lt img src  images store jpg  alt  store    gt                       lt  div gt  lt  --  span5 -- gt                       lt div class  span7  gt                           lt img src  images portal jpg  alt  portal  gt                           lt div class  contactBg  gt                              Administration  Emma Jane Julien lt br   gt                               lt a href  mailto ej emmajulien com  gt ej emmajulien com lt  a gt                           lt  div gt  lt  --  contactBg -- gt                       lt  div gt  lt  --  span7 -- gt                   lt  div gt  lt  --  row-fluid -- gt               lt  div gt  lt  --  container-fluid -- gt           lt  div gt  lt  --  span10 offset1 -- gt       lt  div gt   lt  --  row-fluid -- gt    And here s the css      body           background  url    images 3D2A1698A177AF9B71 218 png  repeat             img           max-width 100           padding-bottom 1                container-fluid           background  fff          padding  1                 row-fluid           width  100            zoom  1            row-fluid  class   span             display  block          float  left          width  100           min-height  30px          margin-left  1            margin-left  2 709239449864817           -webkit-box-sizing  border-box             -moz-box-sizing  border-box                  box-sizing  border-box            row-fluid  span10           width  82 87292817679558            width  82 81973668743387                   row-fluid  span7           width  58 06353591160195            width  57 12912895262725                   row-fluid  span5           width  40 93646408839753            width  40 00205712942283                  row-fluid  span4           width  31 491712707182323            width  31 43852121782062                 contactBg           background   282624          padding  3           max-width 100           height auto

User · Accepted Answer

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

_x000D_

div {_x000D_
/* 25% of viewport */_x000D_
  height: 25vh;_x000D_
  width: 15rem;_x000D_
  background-color: #222;_x000D_
  color: #eee;_x000D_
  font-family: monospace;_x000D_
  padding: 2rem;_x000D_
}

_x000D_

<div>responsive height</div>

_x000D_

User · Answer

For the height of a div to be responsive  it must be inside a parent element with a defined height to derive it s relative height from    If you set the height of the container holding the image and text box on the right  you can subsequently set the heights of its two children to be something like 75  and 25    However  this will get a bit tricky when the site layout gets narrower and things will get wonky  Try setting the padding on  contentBg to something like 5 5    My suggestion is to use Media Queries to tweak the padding at different screen sizes  then bump everything into a single column when appropriate

User · Answer

I don t think this is the BEST solution  but it does appear to work  Instead of using the background color  I m going to just embed an image of the background  position it relatively and then wrap the text in a child element and position it absolute - in the centre

[html] how do I give a div a responsive height

Examples related to html

Examples related to css

Examples related to responsive-design