CODEWITHSUNDEEP
htmlcss
Corentin Branquet
Corentin Branquet

Reputation: 1576

Display block a link into a div

I've this code

.parent {
    width:100px;
    height:100%;
    background: green;
}

.parent a {
    display:block;
    width:100%;
    height:100%;
}
<div class="parent">
    <h3>test</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic asperiores expedita rerum quos ullam qui saepe. Quas quasi dolorum quibusdam deserunt voluptas dolorem tenetur! Quam explicabo laboriosam quaerat iure ipsum.</p>
    <a href="#"></a>
</div>

I want my link to display fully into its container (which is .parent)

Have the div clickable with this link.

Upvotes: 1

Views: 169

Answers (3)

David Mann
David Mann

Reputation: 2260

Try this:

.parent {
  width: 100px;
  height: 100%;
  background: green;
  position: relative;
}

.parent a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

It should do the trick quite nicely if you don't want to wrap your div in an anchor tag. Here's an example.

Upvotes: 2

jaunt
jaunt

Reputation: 5079

I'm not sure I understand, but is this what you want?

.parent {
  width:100px;
  height:100%;
  background: green;
}

.parent a {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:inherit;
  height:inherit;
}
<div class="parent">
    <h3>test</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic asperiores expedita rerum quos ullam qui saepe. Quas quasi dolorum quibusdam deserunt voluptas dolorem tenetur! Quam explicabo laboriosam quaerat iure ipsum.</p>
    <a href="#"></a>
</div>

Upvotes: 3

ItzMe_Ezhil
ItzMe_Ezhil

Reputation: 1406

have to write a div inside the a tag.

    <a href="#"><div class="parent"> <h3>test</h3> <p>Lorem ipsum dolor sit   amet, consectetur adipisicing elit. Hic asperiores expedita rerum quos ullam qui saepe. Quas quasi dolorum quibusdam deserunt voluptas dolorem tenetur! Quam explicabo laboriosam quaerat iure ipsum.</p> <a href="#"></a> </div> </a>

Upvotes: -1

Related Questions