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 · 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

User · 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   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   lt div gt responsive height lt  div gt  x000D   x000D   x000D

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

Examples related to html

Examples related to css

Examples related to responsive-design