css - 如何使整个 div 可点击(表格样式 div)

Question

是的，我知道，这个问题已经被问过很多次了，一个可能的解决方案是在链接中添加 style="display:block;"。

出于某种原因，此解决方案不适用于表格样式的 DIV:

https://jsfiddle.net/exyv8jmw/1/

HTML:

<div class="table">
<div class="tablerow">

    <div class="left">
    <a href="/something.html" style="display:block">
    This is a link</a>    
    </div>

    <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>
</div>

CSS:

.table{
    width:500px;
    display:table;
}

.tablerow{
  display:table-row;
}


.left{
    width:50%;
    background:green;
    display:table-cell;
    padding:5px;
}


.right{
    width:50%;
    display:table-cell;
    background:red;
    padding:5px;
}

如您所见，空白的绿色区域只能水平点击，不能垂直点击。我也试过:

<a href="/something.html" style="display:block"><div class="left">This is a link</div></a>

但这并没有帮助。

Answer 1

您需要在链接、.left 和.tablerow 元素中添加height: 100%;。

.table{
    width:500px;
    display:table;
}

.tablerow{
  display:table-row;
  height: 100%;
}


.left{
    width:50%;
    background:green;
    display:table-cell;
    padding:5px;
    height: 100%;
}


.right{
    width:50%;
    display:table-cell;
    background:red;
    padding:5px;
}

<div class="table">
<div class="tablerow">

    <div class="left">
    <a href="/something.html" style="display:block;height:100%;">
    This is a link</a>    
    </div>
    
    <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>
</div>