CODEWITHSUNDEEP
htmlcss
Mouad Ennaciri
Mouad Ennaciri

Reputation: 1269

Let card content take the available height if necessary

I have a page that contains a card. The card should take the automatic height which depends on its content, except when the content exceeds the height of the screen it is necessary to display a bare scroll.

In this case the title and the content will be scrollable but not the footer. the footer must always be displayed at the bottom of the page in fixed mode (when the content is large).

.card {
  width: 80%;
  border: solid 2px #eee;
  margin-left: 30px;
}
<h1>
  Hello
</h1>
<menu>
  <!-- Elements -->
</menu>
<!-- Elements -->
<!-- Elements -->
<div class="card">
  <p class="card-title">Title</p>
  <div class="card-content">
    <p>
      Integer ullamcorper mi nec pellentesque ultricies. Sed vel efficitur augue. Cras fringilla non nisl convallis blandit. Nunc libero odio, tincidunt vitae sodales eu, pellentesque sed leo. Donec tempus erat sed leo vestibulum, eu fringilla ante dignissim.
      Fusce viverra interdum diam id lacinia. Nam tincidunt euismod quam, at pretium lorem mattis non. Nulla facilisi. Mauris sem massa, porttitor id nisl eu, placerat tincidunt turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis
      ultricies turpis eu mi facilisis, in venenatis lectus iaculis. In vitae augue nec neque pellentesque suscipit eget a est. Aenean dolor ex, vehicula sed bibendum eu, semper in sapien. In eget ante eu nulla scelerisque pharetra vitae tristique lacus.
      Aliquam erat volutpat. Nunc at condimentum velit. Maecenas tempor efficitur lacus, eget bibendum quam dapibus ac. Cras hendrerit metus ac velit mollis, sed dignissim justo aliquet. Fusce eleifend pharetra lectus eget sodales. Quisque ac lacus mollis,
      sollicitudin ligula elementum, porttitor ex. Nulla facilisi. Donec ultricies iaculis dignissim. Pellentesque eu neque quis sapien porta ultricies. Quisque rhoncus pulvinar fringilla.
    </p>
  </div>
  <hr>
  <div class="card-footer">
    <button>
      Apply
      </button>
  </div>
</div>

Demo

What's the most elegant way to do it? Preferably in full CSS/Sass.

Upvotes: 1

Views: 110

Answers (2)

Abdelrhman Arnos
Abdelrhman Arnos

Reputation: 1442

You need to add a max-height to .card and make the .card-footer a sticky element to follow the card when being scrollable in small screens. http://jsfiddle.net/2d0Labwf

.card {
  width: 80%;
  border: solid 2px #eee;
  margin-left: 30px;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

.card-footer {
  position: sticky;
  bottom: 0;
  height: 50px;
  background-color: white;
}
<div class="card">
    <p class="card-title">Title</p>
    <div class="card-content">
      <p>
      Integer ullamcorper mi nec pellentesque ultricies. Sed vel efficitur augue. Cras fringilla non nisl convallis blandit. Nunc libero odio, tincidunt vitae sodales eu, pellentesque sed leo. Donec tempus erat sed leo vestibulum, eu fringilla ante dignissim. Fusce viverra interdum diam id lacinia. Nam tincidunt euismod quam, at pretium lorem mattis non. Nulla facilisi. Mauris sem massa, porttitor id nisl eu, placerat tincidunt turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ultricies turpis eu mi facilisis, in venenatis lectus iaculis. In vitae augue nec neque pellentesque suscipit eget a est. Aenean dolor ex, vehicula sed bibendum eu, semper in sapien. In eget ante eu nulla scelerisque pharetra vitae tristique lacus.
Aliquam erat volutpat. Nunc at condimentum velit. Maecenas tempor efficitur lacus, eget bibendum quam dapibus ac. Cras hendrerit metus ac velit mollis, sed dignissim justo aliquet. Fusce eleifend pharetra lectus eget sodales. Quisque ac lacus mollis, sollicitudin ligula elementum, porttitor ex. Nulla facilisi. Donec ultricies iaculis dignissim. Pellentesque eu neque quis sapien porta ultricies. Quisque rhoncus pulvinar fringilla.
</p>
    </div>
    <hr>
    <div class="card-footer">
      <button>
      Apply
      </button>
    </div>
  </div>

Upvotes: 1

Sean
Sean

Reputation: 8031

You can set a max-height on the card content equal to the viewport height minus the height of the card header and footer by using calc. Then set the overflow to scroll.

This will ensure the card isn't taller than the viewport, the card footer always displays at the bottom, and the rest of the card content is scrollable.

.card {
  width: 80%;
  border: solid 2px #eee;
  margin-left: 30px;
}
.card-content {
  max-height: calc(100vh - 71px);
  overflow: scroll;
}
body { margin: 0; }
<h1>
  Hello
</h1>
<menu>
  <!-- Elements -->
</menu>
<!-- Elements -->
<!-- Elements -->
<div class="card">
  <p class="card-title">Title</p>
  <div class="card-content">
    <p>
      Integer ullamcorper mi nec pellentesque ultricies. Sed vel efficitur augue. Cras fringilla non nisl convallis blandit. Nunc libero odio, tincidunt vitae sodales eu, pellentesque sed leo. Donec tempus erat sed leo vestibulum, eu fringilla ante dignissim.
      Fusce viverra interdum diam id lacinia. Nam tincidunt euismod quam, at pretium lorem mattis non. Nulla facilisi. Mauris sem massa, porttitor id nisl eu, placerat tincidunt turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis
      ultricies turpis eu mi facilisis, in venenatis lectus iaculis. In vitae augue nec neque pellentesque suscipit eget a est. Aenean dolor ex, vehicula sed bibendum eu, semper in sapien. In eget ante eu nulla scelerisque pharetra vitae tristique lacus.
      Aliquam erat volutpat. Nunc at condimentum velit. Maecenas tempor efficitur lacus, eget bibendum quam dapibus ac. Cras hendrerit metus ac velit mollis, sed dignissim justo aliquet. Fusce eleifend pharetra lectus eget sodales. Quisque ac lacus mollis,
      sollicitudin ligula elementum, porttitor ex. Nulla facilisi. Donec ultricies iaculis dignissim. Pellentesque eu neque quis sapien porta ultricies. Quisque rhoncus pulvinar fringilla.
    </p>
  </div>
  <hr>
  <div class="card-footer">
    <button>
      Apply
      </button>
  </div>
</div>

Upvotes: 0

Related Questions