CODEWITHSUNDEEP
htmlcss
deathangel908
deathangel908

Reputation: 9709

vertical align bottom for a specific child

I have a parent element that has 2 children. I want to move 1st child to top, and second one to bottom. The parent element has a scroll and its children size isn't fixed. Children size expands dynamically depending on theirs contententer image description here

So If theirs size are smaller than parent's one they would look like in the left picture, else they should expand parents div like in the right picture. Usually to move element to edges I'd use absolute position like this:

.parent {
   position: relative;
}
.top-child {
   position: absolute;
   top: 0;
}
.bottom-child {
   position: absolute;
   bottom: 0;
}

But this case brakes the flow. Parent width and height wouldn't adjust depending by children size. Another solution is to use vertical-align

.parent {
   display: table-cell;
   vertical-align: bottom;
}

But in this scenario all children would move to bottom.

Here's jsfiddle. Green background is parent. topdiv and bottomdiv and childrens.

How should I CSS divs to attach children to edges without breaking the flow?

Upvotes: 0

Views: 84

Answers (2)

Pete
Pete

Reputation: 58442

you can achieve this use display:table and table-row:

#scroller {
    height:300px; /* this height is the min height before you want to scroll */
    overflow:auto;
}
.table {
    min-height:100%;
    width:100%;
    display:table;
}
.row {
    display:table-row;
}
.row:first-child {
    height:100%; /* this is needed to "push" the second row to the bottom (it will actually be 100% minus the bottom row height */
    background:blue;
}
.row:last-child {
    background:green;
}
<div id="scroller">
    <div class="table">
        <div class="row">expands to fill space</div>
        <div class="row">stays at bottom</div>
    </div>
</div>

Example fiddle

Fiddle with content and scrolling

Update

Applying my styles to your fiddle

Upvotes: 1

Nanang Mahdaen El-Agung
Nanang Mahdaen El-Agung

Reputation: 1434

Something like this?

.main {
  width: 300px;
  height: 300px;
  overflow-y: auto;
  border: 1px solid #999;
  margin-bottom: 30px;
}
.parent {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.child-a {
  flex: 1;
  background: #ccc;
}
.child-b {
  background: #ddd;
}
<div class="main">
<div class="parent">
  <div class="child-a">
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
  </div>
  <div class="child-b">
    <p>Amet ipsum dolor</p>
  </div>
</div>
</div>
<div class="main">
<div class="parent">
  <div class="child-a">
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
    <p>Lorem ipsum dolor</p>
  </div>
  <div class="child-b">
    <p>Amet ipsum dolor</p>
  </div>
</div>
</div>

Upvotes: 1

Related Questions