CODEWITHSUNDEEP
csshtml
dragoon
dragoon

Reputation: 5743

CSS two elements auto-height inside one block

I'm trying to put two blocks into one fixed-height block to create the following layout:

------------------------

UL (initial height=0),

grows on element add until maximum height reached

scroll should be added after max height is reached

------------------------

DIV (initial height=100% of parent)

decreases until min height is reached

------------------------

HTML part of the layout:

<div style="height:100px">
  <ul style="max-height:70px;height:auto;overflow:auto"></ul>
  <div style="min-height:30px;height:auto">
    <span>TEST CONTENT</span>
  </div>
</div>

Upvotes: 3

Views: 2448

Answers (3)

Jared Farrish
Jared Farrish

Reputation: 49218

I'm not sure that the DIV's properties are entirely clear. Note, this is not an answer (yet), just too long to put into a comment.

<div id="container">
  <div id="list">
    <ul></ul>
  </div>
  <div id="content">
    <span>TEST CONTENT</span>
  </div>
</div>

#container {
    height: 100px;
    background: grey;
}
#list {
    max-height: 70px;
    overflow: auto;
    background: #ddf;
}
#content {
    min-height: 30px;
    height: auto;
    background: #fdf;
}

// For testing
setInterval(function(){
    $('ul').append('<li>Test</li>');
},3000);

http://jsfiddle.net/V8yuN/

Now, if you want the DIV#content to at first take up the entire height, but then shrink as the DIV#list UL grows, what is it you're trying to accomplish with DIV#content? Note, I put the UL within a DIV.

Now, the above fiddle demonstrates in a way what you're describing (the DIV#content gets pushed to the bottom). The question I have is, what does the height of the DIV#content matter in your design?

EDIT

Note, if you make the #container overflow: hidden and make the #content's height: 100%, it would appear as if the #container is shrinking.

#container {
    height: 100px;
    background: grey;
    overflow: hidden;
}
#list {
    max-height: 70px;
    overflow: auto;
    background: #ddf;
}
#content {
    height: 100%;
    background: #fdf;
}

http://jsfiddle.net/V8yuN/2

I have no idea, though, if that would cause your design to break, if the #content's actual content needs to display (for instance, if it is changed dynamically).

EDIT 2

The following accomplishes everything but the vertical-align of the #content text:

HTML

<div id="container">
  <div id="push">
    <div id="list">
      <ul></ul>
    </div>
    <div id="content">
      <div class="border-top"></div>
      <div id="content-inner">
        <span>TEST CONTENT</span>
      </div>
    </div>
  </div>
  <div class="border-bottom"></div>
</div>

CSS

#container {
    height: 100px;
    background: grey;
}
#push {
    height: 95px;
    overflow: hidden;
}
#list {
    max-height: 70px;
    overflow: auto;
    background: #ddf;
}
#content-inner {
    min-height: 100px;
    background: #dfd;
    margin: 0;
    border-left: 5px solid #fdf;
    border-right: 5px solid #fdf;
}
.border-top {
    background: #fdf;
    border-radius: 5px 5px 0 0;
    height: 5px;
}
.border-bottom {
    background: #fdf;
    border-radius: 0 0 5px 5px;
    height: 5px;
}

http://jsfiddle.net/V8yuN/6/

Upvotes: 2

DA.
DA.

Reputation: 40691

You really can't do this cleanly with just CSS. I'd suggest using a bit of jQuery for this where you just query the height of both at any given time, figure out which is taller, and then set the other element to match

Upvotes: 2

Dennis Hunink
Dennis Hunink

Reputation: 583

Let's say your html looks like this:

<div id="wrap">
    <div id="top">
    </div>
    <div id="bottom">
    </div>
</div>

then your CSS could look like this, with #wrap height set, and a min-height for the bottom. Mind the height 100% !important.

#wrap{
    height: 400px;
    background: #ccc;
}
#top{
    //height: 200px; for testing 
    background: #f0f;
}
#bottom{
    height: 100% !important;
    min-height: 200px;
    overflow: scroll;
    background: #000;
}

is that kind of what you're searching for?

Would help though if you could post the stuff you've already done.

Upvotes: 0

Related Questions