0

Make an element minus the height of another element in css without display flex. Because flex is a new thing, it is not supported in some browsers which is worrying.

So I have two elements:

<div id="example1">
hello there<br>some text
</div>
<div id="example2">
hi there<br>this is some more text<br>to make this thing more lengthy
</div>

So, because of the text inside #example2, if #example2 is for example: 100px in height, I want to make the div #example1: 100% of page height minus the height of #example2, 100% - height@#example2

Edit:

If there is no way without flex, let me know.

Rajeeva Lochana
  • 21
  • 2
  • 8
  • Nice hint: Flexbox is not a new thing ... it is supported well on ALL actual (released up from 2015) browser(versions). That means: only less then ca. 0.02% off all browsers worldwide does not support it. Please check yourself: https://caniuse.com/?search=flexbox. That means: if you do have a solution in flexbox it is not a problem to use it. – Brebber Mar 10 '21 at 07:40
  • Flex isn't that new, really. It has a [99.07% coverage](https://www.caniuse.com/?search=flex). In your case, you can just do `calc(100vh - 100px)`... – Amaury Hanser Mar 10 '21 at 07:41
  • @AmauryHanser but the height can be random dependent on the text in the div – Rajeeva Lochana Mar 10 '21 at 07:42
  • read *all* the duplicate and you find non-flex solution – Temani Afif Mar 10 '21 at 08:04

2 Answers2

0

You are able to calculate in CSS which is really cool and a much younger feature than flexbox. But head up: that needs a fixed height for the bottom div.

Here the example:

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.top {
    height: calc(100% - 100px);
    background: green;
}
.bottom {
    height: 100px;
    background: darkgreen;
}
    <div class="top">Div top</div>
    <div class="bottom">Div bottom</div>
Brebber
  • 2,986
  • 2
  • 9
  • 19
0

If you're open to using JavaScript then you can use .getBoundingClientRect().height on the element in question and set the element's height to element1.style.height = "calc(100vh - " + element2.getBoundingClientRect().height + "px)";

This is, of course, if you don't already know the height of element1, if you do then this can just be done with CSS!

OOPS Studio
  • 732
  • 1
  • 8
  • 25
  • I cannot use inline css btw. Will this work with the linked stylesheets – Rajeeva Lochana Mar 10 '21 at 08:44
  • This is JavaScript! So as long as you execute it after the elements have loaded and been laid out, then it will grab the element's height and adjust the other element accordingly. It's not CSS at all. (Although the JavaScript does edit a CSS attribute, it's not CSS code.) – OOPS Studio Mar 10 '21 at 09:12