Other The javascript horrortrip

[kpedersen]

In this case, the "expanding div" regions is not clickable.

Ah, that div can go in a <a> (since HTML5 this is valid):

<a href="#">
  <div style="background: red; height: 200px; display: flex; flex-direction: column">
    <div style="flex-grow: 1"></div>
    <div>
      Go Back
    </div>
    <div style="flex-grow: 1"></div>
  </div>
</a>

Make Entire Div Clickable | CSS-Tricks

Update November 2020: I think the best possible technique for this is Method 4 in this article. The <div> (or whatever wrapper element) remains semantic

css-tricks.com

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

 

[Hakaba]

Depending how you get the height of the a element (as you want a box), you have different solutions :

1) Same height depending of the em :

a{
display: inline-block;
width: 100px;
height: 3em;
border: 1px solid blue;
background-color: yellow;
padding: 1em auto;
}

2) Custom height (work with the display: inline-block).

<a href=""><div class="acontent">
    blah blah
    </div> </a>

a {
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;
    background-color: yellow;
    line-height: 100px; /* Here is the magic... */
}

.acontent {
    height: 100%;
    vertical-align: middle;
    display: block;
}

That is ok since HTML5.

 

[PMc]

Ah, that div can go in a <a> (since HTML5 this is valid):

<a href="#">
  <div style="background: red; height: 200px; display: flex; flex-direction: column">
    <div style="flex-grow: 1"></div>
    <div>
      Go Back
    </div>
    <div style="flex-grow: 1"></div>
  </div>
</a>

Ah. Yes, that one might indeed work. Hadn't heard yet about that possibility.