Get the anchor element on the same size as the parent div element

testerprox 0
Viewed 35

I want the outerDiv to onclick open a new windows tab with a specific href. Every div is display: flex.

<div class="outerDiv">
  <div>
   <img>
  </div>
</div>

I already tried to just place a a (anchor) element inside the div but it didnt work. I cant get the a element on the same size as the parent div element. Tried to set the height and width of the a to 100%, but didnt change anything.

<div class="outerDiv">
      <a href=...></a>
      <div>
       <img>
      </div>
    </div>
anchor javascript css html
2 Answers

what I understand from your explanation is that you want the outerDiv to work as a button that opens a new page, and you want the anchor inside it to have the same height and width as its parent which is outerDiv.

Is that it?

if this is the case then you just need to set outerDiv display to flex then give the link 100% height and width.

.outerDiv {
  display: flex;
  width: 80px;
  height: 30px;
  border: 1px solid red;
  background: lightblue;
}

.link {
  background: orange;
  height: 100%;
  width: 100%;
  text-align: center;
}
  <div class="outerDiv">
    <a class="link" href="#">link</a>
    <div>
     <img>
    </div>
  </div>

or just set the anchor's display to block as @Farshad Vaghari suggested

.outerDiv {
  /* display: flex; */
  width: 80px;
  height: 30px;
  border: 1px solid red;
  background: lightblue;
}

.link {
  display: block;
  background: orange;
  height: 100%;
  width: 100%;
  text-align: center;
}
  <div class="outerDiv">
    <a class="link" href="#">link</a>
    <div>
     <img>
    </div>
  </div>

Willpower-70

If you want to change width and height of a tag, change display to block or inline-block because a tags are inline level by default:

<div class="outerDiv">
      <a style="display: block" href=...></a>
      <div>
       <img>
      </div>
    </div>

Now set width = 100% and height = 100% to get the a element on the same size as the parent div element is.

Farshad Vaghari0
Related