Flexbox Sticky Footer 3

flexbox-sticky-footer-3.markdown

Flexbox Sticky Footer 3

A Pen by Ed Wright on CodePen.

License.

index.html

<div class="container">

  <!-- item -->
  <div class="item">
    <div class="item-header">
      ITEM HEADER
    </div>
    <div class="item-body">
      ITEM BODY 
    </div>
    <div class="item-footer">
      ITEM FOOTER
    </div>  
  </div>
  <!--/item -->

  <!-- item -->
  <div class="item">
    <div class="item-header">
      <h1>Title 2</h1>
    </div>
    <div class="item-body">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
      </ul>
    </div>
    <div class="item-footer">
      <button>Click me</button>
    </div>
  </div>
  <!--/item -->

  <!-- item -->
  <div class="item">
    <div class="item-header">
      <h1>Title 3</h1>
    </div>
    <div class="item-body">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
    </div>
    <div class="item-footer">
      <button>Click me</button>
    </div>
  </div>
  <!--/item -->

</div>

style.scss

.container {
  width: 800px;
  height: 400px;
}

.item:nth-child(1) {
  height: 200px;
}

.item:nth-child(2) {
  height: 400px;
}

.item:nth-child(3) {
  height: 100%;
}

.item {
  float: left;
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  background-color: #eee;
  
  &-header {
    padding: 10px;
    
    h1 {
      margin: 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }
  }
  
  &-body {
    padding: 10px;
    flex-grow: 1;
    
    ul {
      padding-left: 20px;
    }
  }
  
  &-footer {
    padding: 10px;
  }
}

button {
  width: 100%;
  padding: 10px;
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
  border: 1px solid #465298;
  cursor: pointer;
  
  &:hover {
    background: #465298;
  }
}