Search code examples
htmlcssflexboxhyperlink

div inside hyperlink does not fill the entire space

I am learning HTML. I have this problem if I add a div inside the hyperlink, the color of this block is cut off.

This is what's is supposed to look like:

as the target

But at mine, this looks like this (for example for the second on the right blue div):

at mine

If I hover the mouse to the place where the blue color is missing, I can click on it and I can go on to another. Why is there such a problem?

body {
  background-color: #303030;
  color: #ffffff;
  font-family: "Lato", sans-serif;
  font-size: 20px;
}

#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.rectangle {
  width: 960px;
  margin: 20px;
  display: flex;
  clear: both;
  text-align: center;
}

.square {
  display: flex;
  flex-direction: row;
  width: 50%;
  margin-bottom: 40px
}

#logo {
  font-family: "Josefin Sans", sans-serif;
  font-size: 70px;
  width: 600px;
  text-align: left
}

#zegar {
  font-family: "Josefin Sans", sans-serif;
  font-size: 70px;
  text-align: left
}

#square1 {
  display: grid;
  grid-template-columns: 250px 250px;
  grid-template-rows: 162px 162px 172px;
}

.tile1 {
  margin: 10px;
  background-color: #3095d3;
  text-align: center
}

.tile1:hover {
  background-color: #2084c2;
}

.tile2:hover {
  background-color: #555555;
}

.tile3:hover {
  background-color: #82b637;
}

.tile2 {
  margin: 10px;
  background-color: #666666;
  text-align: center
}

.tile3 {
  margin: 10px;
  background-color: #93c748;
  text-align: center
}

.tile4 {
  margin: 10px;
  background-color: #ee5a32;
  grid-column: span 2;
  text-align: center;
  font-size: 26px;
  padding: 30px;
  line-height: 150%;
}

#square2 {
  display: grid;
  grid-template: 324px 172px / repeat(4, 120px);
}

.tile5 {
  margin: 10px;
  grid-column: span 4;
  background-color: #666666;
  text-align: center;
  text-align: justify;
  padding: 30px
}

.yt:hover {
  background-color: #c83237;
}

.fb:hover {
  background-color: #3557a2;
}

.gplus:hover {
  background-color: #c84222;
}

.tw:hover {
  background-color: #2084c2;
}

.yt {
  margin: 10px;
  background-color: #d94348;
}

.fb {
  margin: 10px;
  background-color: #4668b3;
}

.gplus {
  margin: 10px;
  background-color: #d95333;
}

.tw {
  margin: 10px;
  background-color: #3095d3;
}

a.tilelink {
  color: #ffffff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}
<div id="container">
  <div class="rectangle">
    <div id="logo">Jan Kowalski</div>
    <div id="zegar">12:00:00</div>
  </div>
  <div class="square">
    <div id="square1">
      <div class="tile1">
        <a href="kimjestem.html" class="tilelink"><i class="icon-user"></i><br />Kim jestem?</a>
      </div>
      <a href="oferta.html">
        <div class="tile1">
          <i class="icon-laptop"></i><br />Co oferuję?
        </div>
      </a>
      <div class="tile2">
        <i class="icon-graduation-cap"></i><br />CV
      </div>
      <div class="tile3">
        <i class="icon-mail"></i><br />Kontakt ze mną
      </div>
      <div class="tile4">
        <i>Talk me cheap. Show me the code!</i><br /> - Linus Torvalds, twórca Linuxa
      </div>
    </div>
    <div id="square2">
      <div class="tile5">
        Tytuł podstrony<br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida dictum odio non interdum. Pellentesque volutpat ultrices porttitor. Donec hendrerit lectus interdum, tristique mi a, feugiat dui. Fusce leo mi, mattis
        ornare efficitur sit amet, dapibus et odio. Mauris id facilisis neque, ut accumsan libero. Donec sed nunc quam.
      </div>
      <div class="yt">
        <i class="icon-youtube"></i>
      </div>
      <div class="fb">
        <i class="icon-facebook"></i>
      </div>
      <div class="gplus">
        <i class="icon-gplus"></i>
      </div>
      <div class="tw">
        <i class="icon-twitter"></i>
      </div>
    </div>
  </div>
  <div class="rectangle"> 2015 &copy; Jan Kowalski - portfolio. Programista webowy zaprasza do współpracy.
    <i class="icon-mail-alt"></i>[email protected]
  </div>
</div>

Solution

  • The issue is, that a div's default height is auto and will be calculated to fit-content. I see no need to use a div in the first place and not use the anchor as a container.

    If you ant to sue the div, you can make use of Flexbox. You set the anchor as column.flexbox by adding display; flex; flex-direction: column. This allows you to use flex-grow: 1 on the div to let it take all remaining space.

    body {
  background-color: #303030;
  color: #ffffff;
  font-family: "Lato", sans-serif;
  font-size: 20px;
}

#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.rectangle {
  width: 960px;
  margin: 20px;
  display: flex;
  clear: both;
  text-align: center;
}

.square {
  display: flex;
  flex-direction: row;
  width: 50%;
  margin-bottom: 40px
}

#logo {
  font-family: "Josefin Sans", sans-serif;
  font-size: 70px;
  width: 600px;
  text-align: left
}

#zegar {
  font-family: "Josefin Sans", sans-serif;
  font-size: 70px;
  text-align: left
}

#square1 {
  display: grid;
  grid-template-columns: 250px 250px;
  grid-template-rows: 162px 162px 172px;
}

.tile1 {
  margin: 10px;
  background-color: #3095d3;
  text-align: center
}

.tile1:hover {
  background-color: #2084c2;
}

.tile2:hover {
  background-color: #555555;
}

.tile3:hover {
  background-color: #82b637;
}

.tile2 {
  margin: 10px;
  background-color: #666666;
  text-align: center
}

.tile3 {
  margin: 10px;
  background-color: #93c748;
  text-align: center
}

.tile4 {
  margin: 10px;
  background-color: #ee5a32;
  grid-column: span 2;
  text-align: center;
  font-size: 26px;
  padding: 30px;
  line-height: 150%;
}

#square2 {
  display: grid;
  grid-template: 324px 172px / repeat(4, 120px);
}

.tile5 {
  margin: 10px;
  grid-column: span 4;
  background-color: #666666;
  text-align: center;
  text-align: justify;
  padding: 30px
}

.yt:hover {
  background-color: #c83237;
}

.fb:hover {
  background-color: #3557a2;
}

.gplus:hover {
  background-color: #c84222;
}

.tw:hover {
  background-color: #2084c2;
}

.yt {
  margin: 10px;
  background-color: #d94348;
}

.fb {
  margin: 10px;
  background-color: #4668b3;
}

.gplus {
  margin: 10px;
  background-color: #d95333;
}

.tw {
  margin: 10px;
  background-color: #3095d3;
}

a.tilelink {
  color: #ffffff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

a {
  display: flex;
  flex-direction: column;
  > div {
    flex-grow: 1;
  }
}
    <div id="container">
  <div class="rectangle">
    <div id="logo">Jan Kowalski</div>
    <div id="zegar">12:00:00</div>
  </div>
  <div class="square">
    <div id="square1">
      <div class="tile1">
        <a href="kimjestem.html" class="tilelink"><i class="icon-user"></i><br />Kim jestem?</a>
      </div>
      <a href="oferta.html">
        <div class="tile1">
          <i class="icon-laptop"></i><br />Co oferuję?
        </div>
      </a>
      <div class="tile2">
        <i class="icon-graduation-cap"></i><br />CV
      </div>
      <div class="tile3">
        <i class="icon-mail"></i><br />Kontakt ze mną
      </div>
      <div class="tile4">
        <i>Talk me cheap. Show me the code!</i><br /> - Linus Torvalds, twórca Linuxa
      </div>
    </div>
    <div id="square2">
      <div class="tile5">
        Tytuł podstrony<br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida dictum odio non interdum. Pellentesque volutpat ultrices porttitor. Donec hendrerit lectus interdum, tristique mi a, feugiat dui. Fusce leo mi, mattis
        ornare efficitur sit amet, dapibus et odio. Mauris id facilisis neque, ut accumsan libero. Donec sed nunc quam.
      </div>
      <div class="yt">
        <i class="icon-youtube"></i>
      </div>
      <div class="fb">
        <i class="icon-facebook"></i>
      </div>
      <div class="gplus">
        <i class="icon-gplus"></i>
      </div>
      <div class="tw">
        <i class="icon-twitter"></i>
      </div>
    </div>
  </div>
  <div class="rectangle"> 2015 &copy; Jan Kowalski - portfolio. Programista webowy zaprasza do współpracy.
    <i class="icon-mail-alt"></i>[email protected]
  </div>
</div>