How to Make an Entire Div Clickable Without JavaScript?

Making a 'div' Whole Clickable with HTML and CSS

You seek a solution to make an entire 'div' clickable without JavaScript. While wrapping 'div's within 'a' tags may seem like a viable option, it raises HTML validation concerns. Here's a more compliant approach:

Using a Fill-Div Link

Create a link inside the 'div' and style it to fill the entire 'div' area. This will give the illusion that the 'div' itself is clickable.

CSS:

#my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

HTML:

<div>

By making the link a block element and setting its height and width to 100%, it covers the entire 'div' space. When clicked, the link will redirect to the specified page, making the 'div' appear clickable.

The above is the detailed content of How to Make an Entire Div Clickable Without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!