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

<div >
  <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 >
      <a href=...></a>
      <div>
       <img>
      </div>
    </div>

CodePudding user response：

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 >
    <a  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 >
    <a  href="#">link</a>
    <div>
     <img>
    </div>
  </div>

CodePudding user response：

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 >
      <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.