CODEWITHSUNDEEP
htmlcssresponsive-design
Eric Brockman
Eric Brockman

Reputation: 854

How do I give a div a responsive height?

I'm starting to learn responsive design, but there's one thing I can't seem to figure out, so far...

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.

How can I do this?

Here's the mark up:

<div class="row-fluid">
        <div class="span10 offset1">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span5">
                        <img src="images/logo.jpg" alt="logo" />
                        <img src="images/store.jpg" alt="store" />
                    </div><!-- /span5 -->
                    <div class="span7">
                        <img src="images/portal.jpg" alt="portal">
                        <div class="contactBg">
                            Administration: Emma Jane Julien<br />
                            <a href="mailto:[email protected]">[email protected]</a>
                        </div><!-- /contactBg -->
                    </div><!-- /span7 -->
                </div><!-- /row-fluid -->
            </div><!-- /container-fluid -->
        </div><!-- /span10 offset1 -->
    </div> <!-- /row-fluid -->

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;
    }

Upvotes: 21

Views: 194201

Answers (3)

naeluh
naeluh

Reputation: 971

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>

Upvotes: 56

Eric Brockman
Eric Brockman

Reputation: 854

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.

Upvotes: 0

Lazaro Gamio
Lazaro Gamio

Reputation: 859

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.

Upvotes: 6

Related Questions