Witam
Wstyd się przyznać ale kiedy dzisiaj po dłuuuuugiej przerwie w kodowaniu stron usiadłem i chciałem stworzyć prostą stronę z rankingiem filmików, by przypomnieć sobie podstawy HTML i CSS, okazało się, że już jest za późno, gdyż już na początku natknąłem się na problemy. Otóż w żaden sposób nie mogłem rozciągnąć diva na cały ekran. W końcu natknąłem się na wartości vw i vh ale wyszedł mi poza obręb przeglądarki. No i na górze został cienki pasek elementu body, którego nie chciałem żeby był widoczny. Siedzę nad tym już chyba z godzinę i nie mogę znaleźć swojego błędu. Możecie pomóc? Niżej screeny z obecnego stanu i kod
<!DOCTYPE HTML>
<html>
<head>
<title>Ulubione filmy</title>
<meta charset="utf-8" />
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="logo">
Moje ulubione TOP filmy!
</div>
<div id="nawigacja">
Strona główna
<br />
Akcja Komedia
<br/>
Horror Sci-Fi
</div>
<div id="glowna">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales convallis libero ut consectetur. Sed finibus eleifend malesuada. Ut bibendum eros id dictum viverra. Pellentesque in elit tincidunt, eleifend mi vel, iaculis ipsum. Cras tincidunt mauris nec justo commodo interdum. Vivamus porta ligula vitae malesuada faucibus. Proin rhoncus vulputate porttitor. Sed blandit nibh in est feugiat, at consectetur justo consequat. Mauris augue lacus, pretium sit amet erat eu, sollicitudin accumsan metus.
Mauris elementum libero sed enim placerat tincidunt. Pellentesque elit enim, rutrum sit amet mauris a, luctus tristique felis. Pellentesque vehicula augue sed orci semper, consectetur eleifend mauris luctus. In vitae faucibus lorem, in dignissim nisi. Etiam mollis eu purus sit amet euismod. Sed nec ex lobortis, semper ex quis, gravida nunc. Donec congue feugiat nisl, eu ultricies lacus convallis quis. Etiam eu aliquet velit. Quisque sit amet nibh eu magna luctus rutrum. Proin imperdiet, mi id luctus aliquam, felis magna dignissim lorem, eu rutrum dolor elit in lacus. Sed consequat maximus lorem, vestibulum euismod lorem vehicula aliquet.
Cras tempor pharetra odio in volutpat. Duis sem tortor, vehicula ut augue sit amet, scelerisque posuere lorem. Donec tincidunt dapibus nibh vitae dapibus. Donec ullamcorper nulla at purus dignissim viverra. Mauris vel arcu enim. Curabitur aliquet, enim sit amet dignissim blandit, ligula metus accumsan est, et aliquam nibh ex eget ligula. Suspendisse rutrum lorem magna, vitae tempus velit ultricies nec. Integer eleifend sit amet ante id aliquam. Vivamus lobortis lectus quis quam rutrum maximus. Morbi arcu tortor, dictum ut dictum nec, pulvinar sed turpis. Praesent dolor felis, condimentum et porta vel, bibendum sit amet urna. Ut egestas scelerisque augue, quis maximus purus luctus eget. Phasellus aliquam tempus quam, at dignissim mi placerat nec. Pellentesque posuere malesuada tempus. Integer nec vestibulum leo, eu posuere nulla.
Donec euismod purus tellus, eu dapibus nulla mattis non. Quisque porta elit aliquam neque molestie molestie. Maecenas porttitor augue id interdum rutrum. Ut suscipit mi ac neque molestie, nec ornare tellus tempus. Nullam aliquam commodo ante, ut posuere nulla pretium sed. Nullam in consequat turpis. Fusce vestibulum arcu lectus, eget bibendum leo pretium ullamcorper. Curabitur in nisl dictum, pharetra massa in, scelerisque libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nisl dolor, semper vel imperdiet id, commodo vitae nisi. Sed rhoncus, turpis nec placerat egestas, augue ex convallis lectus, at finibus lectus erat vel lectus. In ultricies tincidunt tempor.
Suspendisse justo diam, finibus lobortis varius vitae, sollicitudin et sapien. Praesent ut congue metus, quis consectetur est. Proin id libero id est pharetra mollis. Fusce feugiat neque sed cursus malesuada. Praesent auctor convallis nibh non elementum. Mauris blandit turpis turpis. Sed tincidunt pellentesque tincidunt. Cras et mi vel risus molestie varius. Donec non neque ipsum.
</div>
<div id="stopka">
Dziękuję za odwiedziny na mojej stronie!
</div>
</div>
</body>
</html>
body
{
margin-left: 0px;
margin-right: 0px;
background-color: grey;
}
#container
{
margin-top: 0px;
background-color: grey;
color: white;
text-align: justify;
width: 100vw;
height: 100vh;
}
#logo
{
background-color: black;
color: white;
text-align: center;
font-size: 30px;
width: 100%;
}
#nawigacja
{
float: left;
width: 20%;
background-color: white;
color: black;
height: 100%;
}
#glowna
{
background-color: blue;
float: left;
width:80%;
height: 100%;
}
#stopka
{
clear: both;
background-color: black;
color: white;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 10px;
width: 100%;
}
