Display block a link into a div

Question

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.

I suggest you to put `.parent` into `` element - so it will change hole `div` into clickable link — Raźnyy, Jun 24 '15 at 12:45
possible duplicate of [Make a div into a link](http://stackoverflow.com/questions/796087/make-a-div-into-a-link) — mplungjan, Jun 24 '15 at 12:49

score 3 · Answer 1 · answered Jun 24 '15 at 12:53

3

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>

answered Jun 24 '15 at 12:53

jaunt

4,978
4
33
54

Exactly ! Srry for my english, I'm french – Corentin Branquet Jun 24 '15 at 12:54
That's fine :) Please accept my answer when you get the chance to :) – jaunt Jun 24 '15 at 12:55

score 2 · Accepted Answer · answered Jun 24 '15 at 12:55

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.

score -1 · Answer 3 · answered Jun 24 '15 at 12:45

-1

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>

answered Jun 24 '15 at 12:45

ItzMe_Ezhil

1,276
2
11
22

slight correction - you can't have nested anchor elements - but prefectly valid. Obviously the person who downvoted this doesn't know correct HTML syntax. – Jun 24 '15 at 12:52

Display block a link into a div

3 Answers3