Other The javascript horrortrip

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

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

Code:
<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>


 
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 :
CSS:
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).

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

CSS:
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.
 
OP
PMc

PMc

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

Code:
<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.
 
Top