CODEWITHSUNDEEP
csscalc
JacobTheDev
JacobTheDev

Reputation: 18520

Margin Top 100% - Height of Parent Div

I have the following layout to build:

Basically, I need three divs of varying height with varying header heights to be positioned 100% from the top of their parent, minus the height of the header. I could do this with jQuery, but this is a responsive site, so I'd like to keep it as CSS-based as possible (otherwise I'll have to deal with $(window).resize(), which in my experience can be unreliable).

Is this possible, maybe using the CSS3 calc feature?

Thanks.

Upvotes: 13

Views: 5762

Answers (3)

LJ Wadowski
LJ Wadowski

Reputation: 6720

So you can try add content (orange container) stick to the bottom off the blue container (depends of your html structure you can use position: absolute , or margin-top in orange container).

Than you can put header (green) container inside orange container and put it position absolute top -100% (orange position has to be absolute or relatve).

If you will add your html than it will be easy to find more precise solution.

JSFIDDLE with an example

CSS:

.box{
   background: #f00;
   height: 150px;
   width: 100%;
   position: relative;
   padding: 20px;
   padding-bottom: 0;
}
.column{
    background: #0f0;
    width: 30%;
    position: relative;
    top: 100%
}
.header{
    position: absolute;
    bottom: 100%;
    width: 100%;
    background: #00f;
 }

HTML:

<div class="box">
    <div class="column">
        <div class="header">
           header 
        </div>
        aaaaaaa<br/>
        aaaaaa
    </div>    
</div>

Upvotes: 8

Salman Arshad
Salman Arshad

Reputation: 272106

I have this solution (works for any number of columns as long as they fit):

  1. Use inline blocks to center align the results
  2. Use relative positioning to align the blocks with the bottom of blue box (requires top vertical align)
  3. Move the green blocks out of the flow by making them absolute position (this leaves orange box in the flow which aligns with the bottom of blue box)

body {
  font: medium monospace;
}
.blue {
  background: #AAF;
  height: 12em;
  text-align: center;
}
.helper {
  display: inline-block;
  width: 10em;
  vertical-align: top;
  position: relative;
  top: 100%;
}
.green {
  background: #CFC;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
}
.orange {
  background: #FCA;
}
<div class="blue">
  <div class="helper">
    <div class="green">
      1<br/>2
    </div>
    <div class="orange">
      1<br/>2<br/>3
    </div>
  </div>
  <div class="helper">
    <div class="green">
      1<br/>2<br/>3
    </div>
    <div class="orange">
      1<br/>2<br/>3<br/>4<br/>5
    </div>
  </div>
  <div class="helper">
    <div class="green">
      1
    </div>
    <div class="orange">
      1<br/>2<br/>3<br/>4
    </div>
  </div>
</div>

Upvotes: 4

Ian Hazzard
Ian Hazzard

Reputation: 7771

Try the following CSS rule: height: calc(100% - header_height);

Upvotes: 0

Related Questions