Setting a Length (Height or Width) for One Element Minus the Variable Length of Another, I.E. Calc(X - Y), Where Y Is Unknown

Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x - y), where y is unknown

You can use CSS tables:

.wrapper {

  display: table;

  width: 100%;

  margin: 15px 0;

}

.horizontal.wrapper > div {

  display: table-cell;

  white-space: nowrap; /* Prevent line wrapping */

  border: 1px solid;

}

.left { width: 100px } /* Minimum width of 100px */

.center { width: 0; }  /* Width given by contents */

.vertical.wrapper { height: 200px; }

.vertical.wrapper > div {

  display: table-row;

}

.vertical.wrapper > div > span {

  display: table-cell;

  border: 1px solid;

}

.top    { height: 100px; } /* Minimum heigth of 100px */

.middle { height: 0; }     /* Height given by content */

.bottom { height: 100%; }  /* As tall as possible */

<div class="horizontal wrapper">

  <div class="left">100px wide</div>

  <div class="center">Auto width, given by contents</div>

  <div class="right">Remaining space</div>

</div>

<div class="vertical wrapper">

  <div class="top"><span>100px tall</span></div>

  <div class="middle"><span>Auto height, given by contents</span></div>

  <div class="bottom"><span>Remaining space</span></div>

</div>

How do you get a div to hide/scroll overflow and scale to the viewport with consistent margins?

You're on the right track! You can combine vh with calc to get the desired effect.

height: calc(100vh - 10px) - assuming the element is positioned at the top of the screen, that'll achieve the effect you're describing.

To handle scroll/overflow, you'll need an inner container - a div inside the one you set the height property on. Give that inner div { height: 100%; overflow: auto; } and you should be all set.

Here's a demo - to see it working, use the full screen view and shrink your browser's height.

/* These styles are just to make this easier to see,

and to normalize the display a little. */

* { box-sizing: border-box; margin: 0; padding: 0; }

.page { width: 100px; border: 2px solid; }

/* Here's the box that locks to some distance from the bottom, in this case 30px */

.outer {

height: calc(100vh - 30px);

position: relative;

border: 1px solid blue;

}

/* And here's the scrollable container inside it */

.inner {

height: 100%;

overflow: auto;

}

<div class="page">

  <div class="outer">

    <div class="inner">

    content content content content

    content content content content

    content content content content

   </div>

 </div>

</div>

Two dynamic CSS columns?

Here is a solution for you.

.container {

  display: table;

  width: 100%;

}

.takeremaining {

  display: table-cell;

  width: 100%;

  text-align: center;

  background-color: #0000ff;

}

.centeredcontent {

  display: inline-block;

  background-color: #00ffff;

}

.dynamicallyallocated {

  display: table-cell;

  width: 0;

  background-color: #00ff00;

  white-space: nowrap

}

<div class="container">

  <div class="takeremaining">

    <div class="centeredcontent">

      This is my centered content

    </div>

  </div>

  <div class="dynamicallyallocated">

    This is my dynamic content

  </div>

</div>

get the height of the previous element

You can easily achieve the effect you're looking for using flexbox. The trick is to allow the blue container (the one with the flexible height) to grow in size whenever the need arises, using flex: 1 1 auto, which is simply a shorthand for:

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

See proof-of-concept code snippet below:

body {

  padding: 0;

  margin: 0;

}

.wrapper {

  display: flex;

  flex-direction: column;

  flex-wrap: no-wrap;

  align-items: center;

  justify-content: center;

  height: 100vh;

}

.wrapper > div {

  width: 100%;

}

#c1 {

  background-color: #880015;

  color: #fff;

  height: 60px;

  margin-bottom: 10px;

}

#c2 {

  background-color: #ff7f27;

  }

#c3 {

  background-color: #00a2e8;

  flex: 1 1 auto;

  margin-bottom: 10px;

  }

<div class="wrapper">

  <div id="c1">height: 60px</div>

  <div id="c2">height: auto (determined by content?)</div>

  <div id="c3">flexible height</div>

</div>

Sass Variable in CSS calc() function

Interpolate:

body
    height: calc(100% - #{$body_padding})

For this case, border-box would also suffice:

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

Restrict height of container inside flex to not grow more then available space on page with css

The solution is surprisingly easy.

.right {
   position: relative;
   /* width: Do something with width here. */ 
}

.nooverflow {
   position: absolute;
}

then wrap the content of .right with class="nooverflow"

<div class="right">
  <div class="overflow">
     {{ Content of .right }}
  </div>
</div>  

---

Related Topics