Main na całą stronę

pytanie zadane 14 lipca 2017 w HTML i CSS przez Mateusz Arabczyk Początkujący (450 p.)
zamknięte 14 lipca 2017 przez Mateusz Arabczyk

Cześć. Mam problem jak zrobić diva Main na całą stronę (tylko tą białą stronę) oprócz sidebara?

index.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Test</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="wrapper">
    <div class="sidebar">
      <div class="nav">
        <ol>
          <li><a href="/">Main</a></li>
        </ol>
      </div>
    </div>
  </div>
  <div class="main">
    test
  </div>
</body>
</html>

style.css

body{
  width: 100%;
  margin: 0 !important;
  width: 100%;
}
.wrapper{
  width: 100px;
}
.sidebar{
  float: left;
  font-size: 19px;
  font-weight: 500;
  text-align: center;
  position: fixed;
  height: 100%;
  text-align: center;
  padding-left: 35px;
  padding-right: 65px;
  list-style-type: none;
  line-height: 100%;
  width: 200px;
  background-color: black;
}
.nav > ol{
  line-height: 170%;
}
ol{
  list-style-type: none;
}
ol > li > a{
  color: white;
  text-decoration: none;
  display: block;
}
li > .active{
  color: white;
}
.main{
  margin-right: 50px;
  float: right;
}

komentarz zamknięcia: Dostałem poprawną odpowiedź

1 odpowiedź

odpowiedź 14 lipca 2017 przez Fenix Nałogowiec (26,750 p.)
wybrane 14 lipca 2017 przez Mateusz Arabczyk

Najlepsza

W body masz 2x width 100%. Przepraszam, ale dalej w kod sie nie zglebialem. Problem mozesz rozwiazac w latwy sposob uzywajac flexboxa: Stworz sobie conteiner, ktory posiada dwojke dzieci (sidebar, main). Twojemu containerowi nadajesz display: flex; height: 100vh; Nadajesz sidebarowi szerokosc, a w mainie ustawiasz flex: 1; . Tym sposobem main powinien zostac rozciagniety.