Skocz do zawartości
  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • Pełny dostęp do działów i ukrytych treści
    • Możliwość pisania i odpowiadania w tematach
    • System prywatnych wiadomości
    • Zbieranie reputacji i rozwijanie swojego profilu
    • Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz
  • 0

Strona nie dopasowuje się do okna przeglądarki


cola!

Pytanie

Opublikowano

Cześć. Robię sobie z nudów stronę i nie wiem jak zaradzic na problem że strone nie chce dopasować się do okna przeglądarki żeby zawsze była wypełniona.

 

Tu macie kod html

 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css"
 href="blended_layout.css">
  <title>Poradnik CS:GO</title>
</head>
<body>
<div class="strona">
<div class="gora">y</div>
<div class="lewo">
y</div>
<div class="srodek">
y</div>
<div class="prawo">
y</div>
</div>
</body>
</html>

a tutaj kod css

/* Generated by KompoZer */
* {
  border:  none;
  margin: 0;
  padding: 0;
}
body {
  background-image: url(bi-background-cubes.png);
  background-attachment: fixed;
}
.strona {
  display: block;
  width: 1000px;
  overflow: auto;
}
.gora {
  float: left;
  clear: none;
  height: 200px;
  width: 1000px;
}
.lewo {
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}
.srodek {
  float: left;
  clear: none;
  height: 600px;
  width: 680px;
}
.prawo {
  float: left;
  clear: none;
  height: 600px;
  width: 200px;
}

6 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

Opublikowano

Zamiast określać rozmiary w pixelach użyj % , em albo rem

np zamiast:

.strona {
  display: block;
  width: 1000px;
  overflow: auto;
}

użyj:

.strona {
  display: block;
  width: 100%;
  overflow: auto;
}

Wtedy div "strona" dopasuje się do 100% szerokości okna przeglądarki

(')(.)(;)

Opublikowano

Wow rzeczywiscie działa. A jakaś porada na wysokość? Bo ustawiłem wysokość prawego lewego i środka na 100 % i teraz są malutkie. W sumie mi to nie przeszkadza bo to sobie już sam dopasuję tekstem i całą resztą ale ciekawy jestem.

Opublikowano
2 minuty temu, cola! napisał:

Wow rzeczywiscie działa. A jakaś porada na wysokość? Bo ustawiłem wysokość prawego lewego i środka na 100 % i teraz są malutkie. W sumie mi to nie przeszkadza bo to sobie już sam dopasuję tekstem i całą resztą ale ciekawy jestem.

np:

height: 100vh

 

(')(.)(;)

Opublikowano
Dnia 17.11.2017 o 18:38, cola! napisał:

Wow rzeczywiscie działa. A jakaś porada na wysokość? Bo ustawiłem wysokość prawego lewego i środka na 100 % i teraz są malutkie. W sumie mi to nie przeszkadza bo to sobie już sam dopasuję tekstem i całą resztą ale ciekawy jestem.

Poczytaj o dziedziczeniu. Jeśli nadajesz na element 100% to będzie on miał 100%, ale swojego rodzica, czyli na chłopski rozum jeśli div1 ma wysokość 400px a w nim znajduje się div2 na który nakładasz właściwość height: 100%; to tak naprawdę będzie on miał 400px ponieważ jego rodzić (div1) ma taką wartość. Na ogół tworzenie stron interetowych jest w dzisiejszych czasach tak rozwiniętą i prężnie rozwijającą się dziedziną, że naprawdę trzeba poświęcić sporo czasu, zeby coś  rozumieć ;)

Szukam grafika, który zobi mi sygnaturkę ;)

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

×
×
  • Dodaj nową pozycję...