Wie man ein ganzes Div klickbar macht (Tabellenformat divs)

Question

Ja, ich weiß, diese Frage wurde oft gestellt und eine mögliche Lösung ist style="display:block;" zu der Verbindung hinzuzufügen.

Aus irgendeinem Grund diese Lösung nicht mit Tabellenstil DIVs funktioniert:

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; 
} 

Wie Sie sehen können, ist der leere grüne Bereich nur horizontal, aber nicht vertikal anklickbar. Ich habe auch versucht:

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

aber es hilft nicht.

Answer 1

Sie müssen die Elemente height: 100%; zu den Elementen und .tablerow hinzufügen.

.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

erster Satz relativ .Left Position, dann einen Tag Position auf 100% zu und die absolute Breite und Höhe.

.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

Können Sie nicht setzen die div in der 'a' Element?

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

Answer 4

Übernehmen Sie die 'left' Klasse zum a Element direkt, d.h .:

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

Obwohl dies nicht für solche Inhalte nicht zulässt, tut es der Anker den verfügbaren Raum füllen machen.

Ein Teil des Problems ist, dass der Anker-Tag ist, wird standardmäßig ein „span“ Typ-Tag, die nur einen Raum so groß wie sein Inhalt füllt, interne divs zu vernachlässigen.

Sie müssen das Anker-Tag act wie ein "Block" -Stil-Element, nicht sein umgebendes Element oder ein internes Element.

Answer 5

Sie könnten Listener zur Div-ID hinzufügen.

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

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