Let card content take the available height if necessary - html

Question

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.

Answer 1

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>

Answer 2

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>