1

body {
  background: white;
  background-size: 100%;
  font-family: "Segoe wp light", sans-serif;
}

#browse {
  color: #7e7e7e;
  font-weight: normal;
}


table {
  color: #b9b9b9;
  line-height: 20px;
}


.category {
  position: relative;
}


footer {
  background-color: #484242;
  color: #959292;
  height: 44px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}


p.footer {
  text-align: center;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>LEO IMAGES</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
  <div id="wrapper">
    <div>
      <div class="banner">

      </div>

      <div class="category">
        <h1 id="browse">BROWSE BY CATEGORY</h1>
        <table>
          <tr>
            <td>Abstract</td>
            <td>Business/Finance</td>
            <td>Holidays</td>
            <td>Nature</td>
            <td>Signs/Symbols</td>
          </tr>
          <tr>
            <td>Animals/Wildlife</td>
            <td>Celebrities</td>
            <td>Illustrations/Clip-Art</td>
            <td>Objects</td>
            <td>Sports/Recreation</td>
          </tr>
          <tr>
            <td>The Arts</td>
            <td>Editorial</td>
            <td>Industrial</td>
            <td>Parks/Outdoor</td>
            <td>Technology</td>
          </tr>
          <tr>
            <td>Bacgrounds/Textures</td>
            <td>Education</td>
            <td>Interiors</td>
            <td>People</td>
            <td>Transportation</td>
          </tr>
          <tr>
            <td>Beauty/Fashion</td>
            <td>Food and Drink</td>
            <td>Miscellaneous</td>
            <td>Religion</td>
            <td>Vectors</td>
          </tr>
          <tr>
            <td>Buildings/Landmarks</td>
            <td>Healthcare/Medical</td>
            <td>Model Released Only</td>
            <td>Science</td>
            <td>Vintage</td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <footer>
    <p class="footer">Copyrigth &copy 2013 Css Author</p>
  </footer>
</body>

</html>

введите сюда описание изображения

Sasha Omelchenko
  • 12,818
Андрей
  • 9

1 Answers1

0

Работа с flex, который задаётся для body. Позиционирование удаляем. Задача решается. 

body {
  background: white;
  background-size: 100%;
  font-family: "Segoe wp light", sans-serif;
  display: flex;
  flex-direction: column;

}
#wrapper {
  width: 100%;
  border: 1px solid #000;
}
#browse {
  color: #7e7e7e;
  font-weight: normal;
}


table {
  color: #b9b9b9;
  line-height: 20px;
}


.category {
  width: 100%;
  }


footer {
  background-color: #484242;
  color: #959292;
  height: 44px;
  width: 100%;


}


p.footer {
  text-align: center;
}
<body>
  <div id="wrapper">
    <div>
      <div class="banner">

      </div>

      <div class="category">
        <h1 id="browse">BROWSE BY CATEGORY</h1>
        <table>
          <tr>
            <td>Abstract</td>
            <td>Business/Finance</td>
            <td>Holidays</td>
            <td>Nature</td>
            <td>Signs/Symbols</td>
          </tr>
          <tr>
            <td>Animals/Wildlife</td>
            <td>Celebrities</td>
            <td>Illustrations/Clip-Art</td>
            <td>Objects</td>
            <td>Sports/Recreation</td>
          </tr>
          <tr>
            <td>The Arts</td>
            <td>Editorial</td>
            <td>Industrial</td>
            <td>Parks/Outdoor</td>
            <td>Technology</td>
          </tr>
          <tr>
            <td>Bacgrounds/Textures</td>
            <td>Education</td>
            <td>Interiors</td>
            <td>People</td>
            <td>Transportation</td>
          </tr>
          <tr>
            <td>Beauty/Fashion</td>
            <td>Food and Drink</td>
            <td>Miscellaneous</td>
            <td>Religion</td>
            <td>Vectors</td>
          </tr>
          <tr>
            <td>Buildings/Landmarks</td>
            <td>Healthcare/Medical</td>
            <td>Model Released Only</td>
            <td>Science</td>
            <td>Vintage</td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <footer>
    <p class="footer">Copyrigth &copy 2013 Css Author</p>
  </footer>
</body>
Alex
  • 1,122
  • 6
  • 18