Как сделать полный div clickable (таблицы стиля divs)

Question

Да, я знаю, этот вопрос задавался много раз, и возможным решением является добавление style="display:block;" к ссылке.

По какой-то причине это решение не работает с DIVs таблицы стилей:

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

Необходимо добавить height: 100%; к ссылке, .left и .tablerow элементов.

.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>

Answer 2

Первый набор .left положение, чтобы относительное, а затем установить позицию тега абсолютной и ширину и высоту до 100%.

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

 
.tablerow{ 
 
    display:table-row; 
 
} 
 

 

 
.left{ 
 
    width:50%; 
 
    background:green; 
 
    display:table-cell; 
 
    padding:5px; 
 
    
 
    position: relative; 
 
} 
 
.left a { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    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"> 
 
    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>

Answer 3

не могли бы вы поставить DIV внутри элемента 'а'?

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

Answer 4

Нанести 'left' класс к a элементу непосредственно, т.е .:

<a href="#" class="left">this is a link</a> 

Хотя это не позволяет дополнительного контента, он делает якорь заполнения доступного пространства.

Отчасти проблема заключается в том, что тег привязки по умолчанию является тегом типа «span», который заполняет пространство настолько большим, как его содержимое, без учета внутренних div.

Вы должны сделать якорный тег act как элемент стиля «block», а не его окружающий элемент или внутренний элемент.

Answer 5

Вы можете добавить слушателя к id div.

<div class="table" id="clik"> 

    document.getElementById("clik").addEventListener("click", function(){ 
     // document.location = "/something.html"; 
     alert("hello"); 
    });