Grab available height of div without knowing its height or being able to set height 100%

Question

I would like to center the Dasboard h1 in the attached markup. It is not possible for me to know the size of the div or is it possible for me to set height: 100% for every preceding div for this.

I would have thought this was possible with flexbox but every example I see has height 100% or height: 100vh in all the parent elements. I could just use display: table or dispaly: table-cell if that was the case.

html {
  min-height: 100%;
  position: relative;
}

body {
  height: 100%;
  background-color: #f7f7f4;
}

#root {
  height: 100%;
  padding-bottom: 170px;
}

.wrapper {
    max-width: 750px;
}

.grid {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: -30px;
}

.grid__item {
    display: inline-block;
    padding-left: 30px;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.one-half {
    width: 50%;
}

.private-banner__container {
    height: 98px;
}

.private-banner__layout {
    width: 100%;
    height: 100%;
    display: table;
}

.private-banner__right, .private-banner__left {
    display: table-cell;
    vertical-align: middle;
}

.footer__footer {
    padding-top: 48px;
    padding-bottom: 48px;
}

ul {
    margin-left: 38px;
    margin-left: 2.375em;
}

.footer__footer ul li:not(last-of-type) {
    margin-right: 48px;
}

.footer__footer li {
  display: inline;
}

<html lang="en">

  <body>
    <div id="root">
      <header role="banner">
        <div class="wrapper private-banner__container">
          <div class="grid private-banner__layout">
            <div class="grid__item one-half     private-banner__left"><h1>Logo</h1></div>
            <div class="grid__item one-half     private-banner__right"><a href="/business/dashboard">Home</a><a class="link__default" tabindex="0">Log Out</a></div>
          </div>
        </div>
      </header>
      <div>
        <div class="wrapper">
          <div class="grid">
            <div class="grid__item     ">
              <h1>Dashboard</h1></div>
          </div>
        </div>
      </div>
      <footer class="footer__footer">
        <div class="wrapper">
          <div class="grid">
            <div class="grid__item     ">
              <ul>
                <li><a target="_blank" href="/static/about">About</a></li>
                <li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
                <li><a target="_blank" href="/static/cookies">Cookies</a></li>
                <li><a target="_blank" href="/static/privacy">Privacy</a></li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </body>

</html>

@Rob I have removed the span. This is only a representation of the real markup — dagda1, Jan 30 '18 at 19:39
Can you please provide an example of what you want? Even a drawing would help. — Pytth, Feb 16 '18 at 21:35
What are you trying to do with height? What is the end result, is not clear — Munim Munna, Feb 17 '18 at 05:27
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the [How to Ask](https://stackoverflow.com/help/how-to-ask) page for help clarifying this question. — Gerardo BLANCO, Feb 21 '18 at 04:53
Is using 100vh a no go area for you? If not, I did something with CSS grid https://codepen.io/bahiirwa/pen/ZrjXYp — omukiguy, Feb 23 '18 at 09:39
Perhaps similar to this [Sticky header and footer scrollable content](https://stackoverflow.com/q/37887589/483779) — Stickers, Feb 23 '18 at 19:40

Munim Munna · Accepted Answer · 2018-02-21T03:29:04.800

If I am right, you are trying to achieve something like this.

<header id="header" height="120px"></header>
<div    id="content" height="fill the rest of the height"></div>
<footer id="footer" height="120px"></footer>

In this case you will need to use CSS flex. Flex works fine horizontally without any fix, because by default any Block level element has width=100% i.e fills the whole available width of the parent. But it does not have a default height. The height of a block element is calculated as a total of all it's children's height. A div's default height is it's content's height. Even the <html>,<body> tags does not span the whole height of the window, it spans the height of it's contents.

So to make flex work vertically and divide your screen into header,footer and auto-adjusting content, you need to set height starting from the top, set <html>,<body> and #root to 100%

html, body, #root {
   height: 100%;
   margin: 0;
   paddding: 0;
}

Now your #root div is occupying the whole screen height, so you can set your header,footer and contents height using flex.

#root {
   display: flex;
   flex-direction: column;
}
header {
    height: 120px;
}
#content {
    flex: 1;
    overflow-y: auto; /* scrollbar for content */
}
footer {
    height: 120px;
}

This same work of flex can be done by javascript

We run a javascript code that runs when the page is loaded, calculates the screen height and assign the perfect height for the content div, that solves it nice and neat.

window.onload = function () {
    var headerHeight = document.getElementById('header').clientHeight;
    var footerHeight = document.getElementById('footer').clientHeight;
    var contentheight = screen.availHeight - headerHeight - footerHeight;
    document.getElementById('content').style.height = contentheight + 'px';
}

And for centering the <h1> header, just use text-align property, it's enough.

h1 {
    text-align: center;
}

You don't need to set vertical-align to middle unless your <h1> tag has a height specified.

Ronnie Royston · Answer 2 · 2018-02-16T23:56:46.187

vertical-align:middle CSS property along with text-align:center. I always try and keep it simple, in other words unless you must add a wrapper element, don't. So, that was the final thing I did was to remove some unnecessary div nesting you had in there.

Specifically, all I changed was that I added:

h1{
vertical-align:middle;
text-align:center;
}

and then removed the grid-item and grid divs.

html {
  min-height: 100%;
  position: relative;
}

body {
  height: 100%;
  background-color: #f7f7f4;
}

#root {
  height: 100%;
  padding-bottom: 170px;
}

.wrapper {
    max-width: 750px;
}

.grid {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: -30px;
}

.grid__item {
    display: inline-block;
    padding-left: 30px;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.one-half {
    width: 50%;
}

.private-banner__container {
    height: 98px;
}

.private-banner__layout {
    width: 100%;
    height: 100%;
    display: table;
}

.private-banner__right, .private-banner__left {
    display: table-cell;
    vertical-align: middle;
}

.footer__footer {
    padding-top: 48px;
    padding-bottom: 48px;
}

ul {
    margin-left: 38px;
    margin-left: 2.375em;
}

.footer__footer ul li:not(last-of-type) {
    margin-right: 48px;
}

.footer__footer li {
  display: inline;
}

h1{
vertical-align:middle;
text-align:center;
}

<html lang="en">

  <body>
    <div id="root">
      <header role="banner">
        <div class="wrapper private-banner__container">
          <div class="grid private-banner__layout">
            <div class="grid__item one-half     private-banner__left"><h1>Logo</h1></div>
            <div class="grid__item one-half     private-banner__right"><a href="/business/dashboard">Home</a><a class="link__default" tabindex="0">Log Out</a></div>
          </div>
        </div>
      </header>
      <div>

              <h1>Dashboard</h1>

      </div>
      <footer class="footer__footer">
        <div class="wrapper">
          <div class="grid">
            <div class="grid__item     ">
              <ul>
                <li><a target="_blank" href="/static/about">About</a></li>
                <li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
                <li><a target="_blank" href="/static/cookies">Cookies</a></li>
                <li><a target="_blank" href="/static/privacy">Privacy</a></li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </body>

</html>

This may answer the question, but what did you change? Explain what the fix is. — disinfor, Feb 16 '18 at 22:27
2 downvotes? Trolls or is there something wrong with my answer? — Ronnie Royston, Feb 21 '18 at 22:27

score -1 · Answer 3 · answered Feb 16 '18 at 21:34

html {
  min-height: 100%;
  position: relative;
}

body {
  height: 100%;
  background-color: #f7f7f4;
}

#root {
  height: 100%;
  padding-bottom: 170px;
}

.wrapper {
    max-width: 750px;
}

.grid {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: -30px;
}

.grid__item {
    display: inline-block;
    padding-left: 30px;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.one-half {
    width: 50%;
}

.private-banner__container {
    height: 98px;
}

.private-banner__layout {
    width: 100%;
    height: 100%;
    display: table;
}

.private-banner__right, .private-banner__left {
    display: table-cell;
    vertical-align: middle;
}

.footer__footer {
    padding-top: 48px;
    padding-bottom: 48px;
}

ul {
    margin-left: 38px;
    margin-left: 2.375em;
}

.footer__footer ul li:not(last-of-type) {
    margin-right: 48px;
}

.footer__footer li {
  display: inline;
}
 
.grid__item.db {
  display: flex;
  align-items: center;
  justify-content: center;
}

<html lang="en">

  <body>
    <div id="root">
      <header role="banner">
        <div class="wrapper private-banner__container">
          <div class="grid private-banner__layout">
            <div class="grid__item one-half     private-banner__left"><h1>Logo</h1></div>
            <div class="grid__item one-half     private-banner__right"><a href="/business/dashboard">Home</a><a class="link__default" tabindex="0">Log Out</a></div>
          </div>
        </div>
      </header>
      <div>
        <div class="wrapper">
          <div class="grid">
            <div class="grid__item db">
              <h1>Dashboard</h1></div>
          </div>
        </div>
      </div>
      <footer class="footer__footer">
        <div class="wrapper">
          <div class="grid">
            <div class="grid__item">
              <ul>
                <li><a target="_blank" href="/static/about">About</a></li>
                <li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
                <li><a target="_blank" href="/static/cookies">Cookies</a></li>
                <li><a target="_blank" href="/static/privacy">Privacy</a></li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </body>

</html>

This may answer the question, but what did you change? Explain what the fix is. — disinfor, Feb 16 '18 at 22:27
Somebody incorrectly flagged your answer as low-quality. You should add some accompanying text to explain how your answer works to prevent further flagging and/or downvotes. A code-only answer [is not low-quality](https://meta.stackoverflow.com/a/358757/1364007). Does it attempt to answer the question? If not, flag as 'not an answer' or recommend deletion (if in the review queue). b) Is it technically incorrect? Downvote or comment. [From review](https://stackoverflow.com/review/low-quality-posts/18846999). — Wai Ha Lee, Feb 17 '18 at 06:49

Grab available height of div without knowing its height or being able to set height 100%

` element.

3 Answers3