Anchor with height: 100% is larger than parent div (on mobile browsers)-CodePudding

I created a simple grid with grid-items. Some grid-items (divs) should be clickable, therefore I added an anchor tag inside the grid-items.

The anchor should be as large as the parent div, so I set height and width properties of the anchor to 100%.

It works perfectly fine and as expected on Desktop browsers (see code snippet). But on mobile browsers it looks like this.

On mobile the below code snippet also shows this effect, so here's a picture of how it looks on desktop.

Why is the anchor larger than the parent div? How can I avoid this?

Strangely enough it only affects height, but not width.

Thank you :)

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 250px;
    width: 250px;
    margin: 50px;
    border: 3px solid black;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid black;
    aspect-ratio: 1;
}

.grid-item > a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: lightsalmon;
    color: black;
    height: 100%;
    width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Random Website Title</title>
</head>
<body>
    <div >
        <div ></div>
        <div ><a href=#>LINK</a></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
    </div>
</body>
</html>

CodePudding user response：

I figured it out myself, it was actually fairly simple.

While defining the grid, I only defined the grid columns (grid-template-columns). After also defining the grid rows (grid-template-rows) the issue went away. I also learned that I can combine columns and rows with the grid-area property.

So in the end I just replaced the line grid-template-columns: repeat(3, 1fr); with grid-template: repeat(3, 1fr) / repeat(3, 1fr)

Here is the updated code snippet:

.grid {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    height: 250px;
    width: 250px;
    margin: 50px;
    border: 3px solid black;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid black; 
}

.grid-item > a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: lightsalmon;
    color: black;
    height: 100%;
    width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Random Website Title</title>
</head>
<body>
    <div >
        <div ></div>
        <div ><a id="a" href=#>LINK</a></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
    </div>
    <script type="text/javascript" src="style.js"></script>>
</body>
</html>

CodePudding user response：

in your .grid-item > a class replace:

height: 100%;

with:

height: calc(100% - 4px);

Because you have inner borders of 2px from top and 2px from bottom