CODEWITHSUNDEEP
htmlcss
mu3
mu3

Reputation: 749

CSS: max-height: remaining space

The problem is described in this image:

EDIT :
The first included div should always be visible. The second one is hiding its remaining content when main div is fully filled.

<div style="height:100%">
    <div>Dynamic ajax content</div>
    <div style="max-height:[remaining space]">Dynamic ajax content</div>
</div>

Here is a fiddle of what I have so far.

Upvotes: 25

Views: 14613

Answers (8)

Emmanuel Lwanga
Emmanuel Lwanga

Reputation: 1

As of 2025, I have played around with trying to achieve solving this problem. And I've settled with using flex-shrink as the trick.

<div style="width: 220px; height: 200px; display: flex; flex-direction: column;">

  <div>YOUR INDEPENDENT CONTENT</div>
  
  <div style="flex-shrink: 1; overflow: auto; color: blue;">YOU CAN WRECKLESSLY PUT HEIGHTY CONTENT IN HERE. THE DIV's HEIGHT WONT EXCEED THE REMAINING SPACE. (Besides: When you set display=flex on the parent, the child elements by default will have flex-shrink=1. But I've specified it so to remind you its that uncomplicated trick that achieves this)</div>
  
  <div>YOUR OTHER INDEPENDENT CONTENT</div>
  
</div>

Upvotes: 0

Wei-jye
Wei-jye

Reputation: 442

It is the year 2019, we can leverage flexbox to achieve this. In that flexible content can be expanded, use position: absolute to fix the inner content height and width so that it can support overflow.

HTML

<div class="wrapper">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="flexi-content-wrapper">
        <div class="flexi-content">
            <!-- some long contents here -->
        </div>
    </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  height: 90vh;
  padding: 15px;
}

.header {
  font-size: 1.5em;
  font-weight: 700;
  margin: 10px 0;

}

.content {
 margin-bottom: 10px;
}

.flexi-content-wrapper {
  margin-top: 10px;
  flex: 1;
  position: relative;
}

.flexi-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgb(253, 140, 140);
  overflow: auto;
}

Here's the full example. If you prefer stackblitz: https://stackblitz.com/edit/angular-chvhsk

Or, you can run the following code using the snippet:

.wrapper {
  display: flex;
  flex-direction: column;
  height: 90vh;
  padding: 15px;
}

.header {
  font-size: 1.5em;
  font-weight: 700;
  margin: 10px 0;

}

.content {
 margin-bottom: 10px;
}

.flexi-content-wrapper {
  margin-top: 10px;
  flex: 1;
  position: relative;
}

.flexi-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgb(253, 140, 140);
  overflow: auto;
}

.paragraph {
  padding: 20px 15px;
}
<div class="wrapper">
    <div class="header">Lorem Ipsum</div>
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
        electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
        Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
        PageMaker including versions of Lorem Ipsum.</div>
    <div class="flexi-content-wrapper">
        <div class="flexi-content">
            <div class="paragraph">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu lectus eget metus faucibus luctus
                vitae et felis. Curabitur a vestibulum ex. Morbi ut tincidunt risus. Morbi luctus commodo gravida.
                Curabitur vitae rutrum nulla. Cras metus lacus, feugiat nec fermentum vel, suscipit et mauris. Ut
                consequat gravida dolor ut varius. Mauris vestibulum lorem vel egestas laoreet. Aliquam laoreet lacus
                ante, vel porttitor magna luctus quis. Nullam diam est, sodales in risus quis, fringilla venenatis nunc.
                Suspendisse eu vehicula risus, eu tempus risus. Morbi id urna consequat, malesuada ligula vitae,
                dignissim enim. Donec eros diam, feugiat et posuere a, rhoncus a eros. Aenean quis gravida purus, non
                elementum diam.
            </div>
            <div class="paragraph">
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris
                orci felis, dignissim vitae ullamcorper ac, interdum vel mauris. Suspendisse semper elit ipsum, id
                pretium mi viverra ut. Morbi fermentum eleifend metus ac dictum. Curabitur lectus quam, varius id dui
                at, imperdiet fermentum ipsum. Phasellus id eleifend felis. Etiam scelerisque porta auctor.
            </div>
            <div class="paragraph">
                Maecenas maximus purus a urna volutpat, quis congue nulla blandit. Donec ac ex massa. Vivamus euismod
                quam sit amet maximus commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan,
                enim in consequat vehicula, nunc justo finibus nibh, quis tincidunt massa eros eu risus. Nulla
                scelerisque rutrum rutrum. Suspendisse venenatis, dolor eu finibus maximus, arcu massa varius velit,
                eget maximus lacus ex ut tellus. Cras a tortor iaculis, volutpat risus quis, congue lectus. Curabitur id
                mi in massa rutrum luctus. Donec ornare dolor ut massa congue, ac pretium lacus viverra. Morbi vulputate
                sapien et nibh pharetra cursus. Phasellus ac lobortis orci, eu laoreet tortor. Cras ac purus ligula. Sed
                in cursus ipsum. Etiam interdum neque vitae euismod facilisis.
            </div>
            <div class="paragraph">
                Integer placerat feugiat metus, a egestas mi porta lacinia. Nam interdum pretium ligula feugiat
                elementum. Phasellus quis urna tincidunt, rhoncus ligula et, commodo tortor. Pellentesque tristique
                ipsum eu odio sodales finibus. Vestibulum ut enim malesuada, ullamcorper est pretium, pulvinar elit. Ut
                gravida luctus elit. Ut vehicula sodales convallis. Mauris at velit eget nisi tincidunt tempus. Aenean
                non est scelerisque nunc porta volutpat. Nam urna justo, fermentum vitae neque et, tristique porttitor
                ipsum. Praesent orci quam, fermentum id ultricies id, varius et lorem. Vivamus quis viverra eros, vitae
                rutrum sapien.
            </div>
            <div class="paragraph">
                Sed odio leo, imperdiet vitae feugiat et, volutpat id massa. Proin gravida feugiat vehicula. Nulla
                lobortis risus nec cursus congue. Praesent euismod fringilla ante, aliquam semper arcu malesuada sed.
                Nulla ac nisl velit. Aliquam porta dui sit amet arcu tempor vehicula. Integer tincidunt nisl vitae diam
                venenatis dictum. Integer ut placerat leo. Ut eu ultrices magna. Nam eget leo gravida, semper urna
                mollis, bibendum ante. Proin accumsan massa nec hendrerit gravida. Suspendisse interdum ipsum in justo
                ullamcorper, eu hendrerit turpis iaculis. Nunc id rhoncus urna. Integer elementum nibh ut turpis gravida
                accumsan. Quisque vulputate imperdiet ligula sed imperdiet. Nullam auctor ante nunc, vel pretium tortor
                tempor quis.
            </div>
            <div class="paragraph">
                Morbi id tellus vehicula, dapibus ante eget, malesuada arcu. Vivamus aliquam vitae sem eu tincidunt.
                Nullam laoreet consequat congue. Pellentesque id vestibulum metus. Nullam elementum tincidunt dignissim.
                Mauris et erat id ipsum elementum ullamcorper eget non metus. Phasellus elementum lorem non lacinia
                pretium. Fusce vel placerat sapien. Sed condimentum bibendum lectus at rhoncus. Phasellus eu auctor
                velit.
            </div>
        </div>
    </div>
</div>

Upvotes: 22

Shon Morgun
Shon Morgun

Reputation: 41

Solution 2022

HTML:

<div class='parent'>
    <div class='child-one'/>
    <div class='child-two'/>
</div>

CSS:

.parent {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.child-one {
   ...
}

.child-two {
   flex: 1
}

Upvotes: 1

NGLN
NGLN

Reputation: 43649

I think you are looking for something like this, see demo fiddle. Narrow or widen the results pane to see it in action.

Minimum CSS:

#wrapper {
    overflow: hidden;
}
#upper {
    max-height: 100%;
    overflow-y: auto;
}
#downer {
    height: 100%;
}

HTML:

<div id="wrapper">
    <div id="upper"></div>
    <div id="downer"></div>
</div>

Upvotes: 4

Mohamed Hana
Mohamed Hana

Reputation: 404

Solution:

HTML

<div id="outer">
    <div id="inner_fixed">
        I have a fixed height
    </div>

    <div id="inner_remaining">
        I take up the remaining height
    </div>
</div>

CSS

#outer {
   display: flex;
   flex-flow: column;
   height: 100%;
}
 
#inner_fixed {
   height: 100px;
   background-color: grey;
}
 
#inner_remaining {
   background-color: #DDDDDD;
   flex-grow : 1;
}

There are other solutions provided in this article: https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height

Upvotes: 1

Loi Nguyen Huynh
Loi Nguyen Huynh

Reputation: 9938

Is this what you want? Try replacing the content of #main :first-child to a very long lorem ipsum to see the behavior when first child is getting too long

#main{
    height: 300px;
    border: 1px solid;
    display: grid;
    grid-template-rows: minmax(50%, auto) 1fr;
    overflow-y: hidden;
}
#main :last-child{
    border: 1px solid red;
    overflow-y: auto;
}
<div id=main>
    <div>Dynamic ajax cLor</div>
    <div>Dynamic ajax content<br>Dynamic ajax content</div>
</div>

Upvotes: 0

StackSlave
StackSlave

Reputation: 10627

I can only guess that you want to use CSS calc() (used with JavaScript style in this case) based on your post and Fiddle:

//<![CDATA[
/* js/external.js */
var doc, html, bod, nav, mobile, M, I, S, Q, special, unspecial; // for use on other loads
addEventListener('load', function(){
doc = document; html = doc.documentElement; bod = doc.body;  nav = navigator;
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
S = function(selector, within){
  var w = within || doc;
  return w.querySelector(selector);
}
Q = function(selector, within){
  var w = within || doc;
  return w.querySelectorAll(selector);
}
special = function(str){
  return str.replace(/&/g, '&amp;').replace(/'/g, '&apos;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
unspecial = function(str){
  return str.replace(/&amp;/g, '&').replace(/&apos;/g, "'").replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
}
var testText = special("This is just a bunch of text to show you if it works. You can see why characters like < and > should be escaped in HTML & .innerHTML, but not in .value. You'll want to use Element.getBoundingClientRect() if the height is dynamic.");
var pageTop = I('page_top'), fd = I('first_dynamic'), dyn = I('dynamic'), dynS = dyn.style;
I('test_button').onclick = function(){
  if(fd.innerHTML === ''){
    fd.innerHTML = testText;
  }
  else{
    dyn.innerHTML += testText;
    dynS.height = 'calc(100% - '+pageTop.getBoundingClientRect().height+'px)';
  }
}
}); // end load
//]]>
/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  height:100%; overflow:hidden; padding:0; 
}
h1{
  text-align:center; padding:3px 0;
}
input{
  width:100%; font-size:28px;
}

#first_dynamic,#dynamic{
  overflow-y:scroll;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <div id='page_top'>
    <h1>TOP OF PAGE HERE</h1>
    <input id='test_button' type='button' value='Click to Test' />
    <div id='first_dynamic'></div>
  </div>
  <div id='dynamic'>
  </div>
</body>
</html>

You should know that Element.getBoudingClientRect() does not calculate margins. You should also know that if your #first_dynamic is too large you'll have issues.

Upvotes: 0

Ben Allen
Ben Allen

Reputation: 69

I'm not quite sure what you mean but you can use percentages... height:70%; explained more here http://www.w3schools.com/cssref/pr_dim_height.asp Percentage amounts will change depending on the users screen height. I think this might be what you need.

Upvotes: 0

Related Questions