Skocz do zawartości
PL
Szukaj na Pecetowiczu
Nowe Szukaj Zaloguj Dołącz
  • Utwórz konto

Egzamin E14. Strona zajmuje całą wysokość viewportu

Udostępnij
Rekomendowane odpowiedzi

DawidLS

Witam mam w szkole próbny egzamin E14 i muszę ogarnąć stronę no i mam takie zadanie: 

Strona zajmuje całą wysokość viewportu przeglądarki (zastosować CSS3).

I jak to teraz zrobić siedzę i sie głowie juz z 2 godziny. Szukałem na necie żadne wysokości 100% i żadne minimalne wysokości też nie działają, juz mi brak pomysłów Próbowałem nawet bez tego css3 zrobić zwykłe css5 ale nie potrafię. Pomoże ktoś?

CSS: 

html, body { height: 100%; margin: 0;}

#caly_blok {
        font-size:24px;
        min-width:1000px;
        max-width:1200px;
	margin-left: auto;
	margin-right: auto;
      }

      #naglowek {
        background-color:gold;
        text-align:center;
		height: 100px;
		width: 100%;
      }

      #lewy {
        display:table-cell;
        background-color:#DDD;
        min-height:150px;
        width:25%;
      }

      #srodek {
        display:table-cell;
        background-color:#EEE;
        min-height:150px;
        width:75%;
      }

      #stopka {
        background-color:gold;
        text-align:center;
      }

      p {
        margin:0;
        padding:15px;
      }

HTML: 

<!DOCTYPE html>
<html>
	  <head>
		<meta charset="utf-8">
		<title>Tytuł</title>
		<link rel="Stylesheet" type="text/css" href="styles/style.css" />
	  </head>
	<body>
		  <div id="caly_blok">
			<div id="naglowek">nagłówek strony</div>

			<div id="lewy">
			  <p>to jest lewa kolumna układu elementów HTML w tej części kursu CSS</p>
			</div>

			<div id="srodek">
			  <p>środkowa kolumna środkowa kolumna środkowa kolumna środkowa kolumna środkowa kolumna środkowa kolumna środkowa kolumna środkowa kolumna </p>
			</div>

			<div id="stopka">stopka strony</div>
		  </div>
	</body>
</html>
Odnośnik do komentarza
Udostępnij na innych stronach

-n3veR Online

41 minut temu, DawidLS napisał:

Próbowałem nawet bez tego css3 zrobić zwykłe css5 ale nie potrafię.

xD cyferka po skrócie CSS, to tylko wersja która jest mało ważna, bo przeglądarki _zawsze_ korzystają z najnowszej.

Poza tym nie ma jeszcze CSS v5 - chyba nawet nie wiesz z czego zdajesz ten egzamin... O zgrozo!

Do `body` daj: 

min-height: 100vh;

Dla `#caly_blok`: 

min-height: inherit;
position: relative;

I dla `#stopka`: 

bottom: 0;
left: 0;
position: absolute;
right: 0;
top: auto;
width: 100%;

Chyba, że to nie jest zadowalający efekt, to trzeba się niestety pobawić JSem.

Odnośnik do komentarza
Udostępnij na innych stronach

SeNioR

No i do tagu head dodaj: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Odnośnik do komentarza
Udostępnij na innych stronach

Kontynuuj dyskusję

Dołącz do Pecetowicza, aby kontynuować dyskusję w tym wątku.

Zaloguj się
Zarejestruj się
Zadaj pytanie bez logowania
  • Dodaj nową pozycję...
  • Dodaj nową pozycję...