Forcing a display:table div to take all available height

Question

I'm trying to vertically center a text which is inside a div (.site-title), itself inside a div (.site-title-wrapper), and all of this inside another div (.site-header), which is the menu of the website.

Here are some pictures:

In green: .site-title-wrapper In red: .site-title and in white: .site-header

And I have the following CSS for these divs:

.site-title-wrapper {
   display: table;
   height: 100%;
   position: absolute;
   padding: 23px;
   background-color: green;
}

and

.site-title {
   font-family: "Roboto", sans-serif;
   display: table-cell;
   vertical-align: middle;
}

I've seen that using table and table-cell to vertically center a div inside another one was a good solution. It works fine, but the only thing I need to do is to force .site-title-wrapper to take all available height, so the green box goes down to the end of the white one (the menu).

The idea is to simply center the title with the menu elements.

I can't really change the html part, so I'm trying to fix it only with CSS.

Do you know how I can fix it?

.site-header{
  width: 100%;
  height: 100px;
  border: 2px solid black;
}

.site-title-wrapper {
   display: table;
   height: 100%;
   padding: 23px;
   background-color: green;
}


.site-title {
   font-family: "Roboto", sans-serif;
   display: table-cell;
   vertical-align: middle;
   background-color: red;
}

<div class='site-header'>
  <div class='site-title-wrapper'>
    <div class='site-title'>
      <a href="#">Some Text</a>
    </div>
  </div>
</div>

EDIT: Here is a fiddle, in which what I tried works (I just removed the absolute) : https://jsfiddle.net/0xhL76gk/2/

If you are making it absolute - you might have to give it manual height. — Muhammad Ovi, Apr 05 '19 at 17:35
Note you can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) to provide users with an example that can be run on this site. Note, however, that getting 100% height is a common question: [How to make a div 100% height of the browser window?](https://stackoverflow.com/q/1575141/215552), for instance. — Heretic Monkey, Apr 05 '19 at 17:59
Possible duplicate of [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — shadow2020, Apr 05 '19 at 18:40
Muhammad Ovi, I used absolute to make sure it doesn't go above the text. Also I made a fiddle, but on the fiddle it works and not on my website... https://jsfiddle.net/0xhL76gk/2/ — ColChope, Apr 05 '19 at 18:41
In your fiddle, `.site-header` is 100px high, but I don't see that in the screenshot; it's more like 93px there. So are you sure the header has a specific height on your real site? — Mr Lister, Apr 05 '19 at 19:26
No it has not. Does it change something ? I mean the problem is not about this div, is it ? — ColChope, Apr 05 '19 at 19:52
@ColChope Yes it is. The table is 100% high, which in the fiddle is 100% of 100px. On your real site, 100% of what? If a block does not have a defined height, its height will depend on the height of its children. That is, you have a circular dependency here: the browser won't know how high the site-header when it starts drawing the table, so it ignores the table's height property. — Mr Lister, Apr 06 '19 at 06:15
You say you can't change the HTML, so if you show what the actual HTML of the site-header looks like, perhaps we can come up with a solution that doesn't require setting the site-header's height explicitly.. — Mr Lister, Apr 06 '19 at 06:19
It's done with wordpress so it's a template I'm not familiar with. Anyway, here is the concerned part of the HTML : https://imgur.com/a/0WBb87y — ColChope, Apr 07 '19 at 13:58

Forcing a display:table div to take all available height

0 Answers0