Stretching tag to fill entire

Question

Here\'s a simple menu structure:

  
Home
  


        

Answer 1

display:flex

is the HTML5 way.

See Fiddle

Useful to hack frameworks buttons, or any other element, but you may need to remove their padding first, and set them to the desired height.

In this case, angular-material tabs, which are kind of tricky to make them work as a "standard" website nav.

Notice that the pointer changes as soon as you enter the tab : the < a > are now stretched to fit their parent dimensions.

Out of topic, notice how flawless angular-material displays the ripple effect, even on a "large surface".

.md-header{
/* THIS IS A CUSTOM HEIGHT */
    height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

md-tab{    
    padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

a{
    display: flex;
    align-items: center;
    justify-content: center; 
    height: 100%; 
}

UPDATE 2018

AngularJS Material throws a (gentle) warning when using flex on button elements, so don't assume all HTML elements/tags can handle display:flex properly, or have a homogeneous behaviour across browsers.

Remember to consult flexbugs in case of unexpected behaviour in a particular browser.