[HTML] Responsywny układ strony internetowej (Problem z przewijaniem)

Dla specjalistów Webmastering
#1

Witam!

Mam problem. Posiadam takie oto pliki:

Zwierzęce Rekordy - Największe zwierzęta
Zwierzęce Rekordy - Największe zwierzęta
Największe zwierzęta świata

1) Największe zwierzę – płetwal błękitny
Największe znane zwierzę w historii Ziemi. Zaliczany do rodziny fałdowców, podrzędu fiszbinowców, rzędu waleni. Płetwal błękitny ma dwa otwory nosowe, małą płetwę grzbietową w tylnej części ciała i dużą płetwę ogonową z wyraźnym wcięciem pośrodku. Dawniej w oceanach żyło wiele osobników tego gatunku. Masowe polowania na wieloryby w XX stuleciu sprawiły, że populacja płetwali błękitnych zmniejszyła się wielokrotnie. Jedynym naturalnym wrogiem płetwala jest orka.
Długość: do 33 m (rekordowy osobnik, wyrzucony na brzeg Grytviken w 1912 roku, miał 33,58 m)
Masa ciała: do 190 ton.
Ubarwienie: błękitnoszare, skóra może być cętkowana.
Pożywienie: ryby, mięczaki, skorupiaki, zooplankton.
Dojrzałość płciowa: po przekroczeniu długości 20 metrów.
Rozród: ciąża trwa około 11 miesięcy, noworodek ma ok. 7 m długości i waży 2 700 kg i przybiera na wadze przez pierwsze 9 miesięcy swego życia z prędkością 4 kg na godzinę.
Prędkość: do 28 km/h.
Długość życia: 80 lat.
Występowanie: wody wszystkich oceanów, głównie pelagial, u wybrzeży widywany sporadycznie; odbywa wędrówki sezonowe, w okresie letnim przemieszcza się w ślad za topniejącym lodem.

2) Największy ssak lądowy – słoń afrykański Gatunek ssaka z rodziny słoniowatych, największe współcześnie żyjące zwierzę lądowe. Zwierzę stadne, zamieszkuje afrykańską sawannę, lasy i stepy od południowych krańców Sahary po Namibię, północną Botswanę i północną część Afryki. W starożytności wykorzystywane jako zwierzęta bojowe. Wielkość • Wysokość: samiec – od 3 do 4,2 m, samica od 2,2 do 2,6 m • Długość: samiec – od 6 do 7,5 m, samica – od 4,9 do 6,2 m • Masa ciała: samiec – od 4000 do 6000 kg, samica – od 2100 do 3200 kg • Długość ciosów: do 3 m • Masa ciosów: od 30 do 42 kg Tryb życia • Zwyczaje: żyje w grupach rodzinnych • Odgłosy: głębokie chrząkanie jako stała forma komunikacji, trąbienie, gdy jest zdenerwowany • Pożywienie: rośliny • Długość życia: około 70 lat

  1. Największy gad – Krokodyl różańcowy
    (Crocodylus porosus) – gatunek gada z rodziny krokodyli właściwych (krokodylowatych). Jest największym współcześnie żyjącym gadem.
    Występowanie
    Indie, Sri Lanka, Azja Południowo-Wschodnia, Filipiny, Północna Australia, Cejlon, Sumatra, Jawa, Borneo, Fidżi.
    Biotop
    Najczęściej przebywa niedaleko ujść rzek do morza. Potrafi żyć w słonej wodzie i często wypływa na pełne morze.
    Wygląd
    Na głowie ma dwa rzędy okrągławych kostnych narośli ciągnących się od krawędzi oczu do otworów nosowych, które przypominają paciorki różańca. Grzbiet ciemnooliwkowy, przechodzący poprzez zielone, brunatne, ciemnoplamiste do prawie czarnego, brzuch żółtawy.
    Rozmiary
    Długość ciała dorosłych osobników to na ogół 4-5 m (rekordowe samce mogą mieć do 7 m). Masa ciała samców dochodzi do ponad 1 tony.
    Pokarm
    Ssaki, ptaki, gady, ryby. Na swe ofiary, podobnie jak inne krokodyle, czatuje zanurzony u wodopojów. Schwytaną zdobycz uśmierca za pomocą paszczy, ogona oraz topiąc ją. Jest on jednym z najgroźniejszych dla człowieka gatunków krokodyli. W nocy wychodzi na ląd odchodząc na znaczne odległości od wody atakując każde spotkane zwierzę, również człowieka. Co roku odnotowuje się przypadki ataków na ludzi, z tego też powodu stały się one postrachem wśród ludności tubylczej.
    Rozród
    Samica składa w gnieździe 25-50 sztuk jaj z dala od wody. Gniazda są kształtu kopcowatego, utworzone z liści i pędów roślin. Średnica gniazda dochodzi do 7 m przy wysokości do 1 m. W gnieździe, wśród gnijących części roślin temperatura wynosi ok. 32 °C. Co roku samica buduje nowe, zawsze w tym samym miejscu gniazdo.
    Inteligencja
    Dr Adam Britton odkrył, że mimo mózgu stanowiącego mniej niż 0,05% masy ciała krokodyle te są inteligentnymi zwierzętami, potrafią bowiem uczyć się szybciej niż szczury.

  2. Największy ptak świata – Struś afrykański
    (Struthio camelus), jedyny gatunek ptaka z rodziny strusi (Struthionidae). Największy i najcięższy ptak żyjący obecnie: 274 cm wysokości i 156 kg wagi. Posiada bardzo dobry wzrok. Samiec wyższy od samicy. Struś występuje w 4 podgatunkach w Afryce, na terenie południowej Sahary do Sudanu i Etiopii, w Somalii po Kenię, od południowej Kenii do Tanzanii i w Afryce Południowej. Długie nogi, uda silnie umięśnione oraz tylko po dwa kopytkowate palce u nóg, większy opatrzony silnym pazurem. Struś nie lata, lecz jest rekordzistą w biegu wśród ptaków (72-96 km/godz.), podczas biegu stawia kroki o długości 3,5 metra… Ma największe oczy z wszystkich kręgowców lądowych (5 cm średnicy). Żyje w małych stadach (5-6 sztuk) na pustyniach, półpustyniach i sawannach, przystosowany do niekorzystnych warunków (może przeżyć nawet 25-procentowy spadek masy ciała wskutek odwodnienia). Żywi się głównie roślinami. Gniazduje na ziemi, samiec parzy się z 2, 3 i więcej samicami, każda składa 2-11 jaj o wadze do 1,8 kg (łącznie 10-40 jaj). Inkubacja trwa 42 dni. Wysiaduje głównie samiec i on zajmuje się pisklętami, które opuszczają gniazdo wkrótce po wylęgu.

  3. Największa ryba świata – Rekin wielorybi
    (Rhincodon typus) największy przedstawiciel rekinów, łatwo rozpoznawalny po specyficznym ubarwieniu. Jest też największą znanąrybą. Największy wiarygodnie zmierzony osobnik tego gatunku mierzył 18,8 m długości[4]. Masa ciała rekina wielorybiego sięga 13,6 t (niepotwierdzone dotąd pogłoski mówią o osobnikach nawet 20-metrowej długości, ważących ponad 30 ton[4]). Na wielu obszarach maksymalna odnotowana długość nie przekracza jednak 10–12 m[4]. Pomimo imponujących rozmiarów i groźnie brzmiącej nazwy, rekin wielorybi jest rybą łagodną i nie stanowi zagrożenia dla człowieka. Jest jednym z trzech znanych rekinów żywiących się planktonem. Pozostałe dwa to długoszpar i Megachasma pelagios. Rekin wielorybi dożywa ponad 70 lat. Jest poławiany gospodarczo, jego mięso osiąga wysokie ceny. Nieprowokowany nie stanowi zagrożenia dla człowieka.
    Jest gatunkiem kosmopolitycznym, migrującym, występuje w pelagialnych wodach tropikalnych i subtropikalnych całego świata. Pływa blisko powierzchni wody, samotnie lub w stadach liczących do stu osobników. Zjada plankton i nekton – skorupiaki, głowonogi i drobneryby pelagiczne. Jego wędrówki są prawdopodobnie związane z rozwojem planktonu i zmianami temperatury wody.

Copyright &copy 2015

(Tekst w div srodek nie jest jeszcze zformatowany.)

#caly_blok {
font-size:24px;
min-width:480px;
max-width:1600px;
border-left:1px solid green;
border-right:1px solid green;
}

#naglowek {
background-color:green;
text-align:center;
font-size:1.6em;
line-height:1.5em;
font-weight:bold;
}

#lewy {
float:left;
width:20%;
font-size:1em;
line-height:1.5em;
}

#lewy p {
border:1px solid green;
border-left:none;
margin:15px 0;
padding:5px;
}

#srodek {
float:left;
width:60%;
font-size:1.2em;
line-height:1.5em;
text-align:center;
overflow: auto;
}

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

#srodek h6 {
margin:3px 0;
padding:0px;
}

#srodek h4 {
margin:10px 0;
padding:10px;
}

#prawy {
float:left;
width:20%;
font-size:1em;
line-height:1.5em;
}

#prawy p {
border:1px solid green;
border-right:none;
margin:15px 0;
padding:5px;
}

#stopka {
clear:both;
background-color:green;
text-align:center;
font-size:1.4em;
line-height:1.5em;
}

a {
color:green;
TEXT-DECORATION: none;
font-weight: normal;
}
a:hover {
color:green;
TEXT-DECORATION: none;
font-weight:bold;
}

Chodzi mi o to, aby wysokość nagłówka i stopki to było po 10% wysokości okna, a wysokość div srodek 80%.

Jeśli treść w div srodek nie mieści się na ekranie, to aby nie było suwaka działającego na całą stronę, a jedynie na div srodek.

Czy ktoś może wie jak to zrobić?

 

–

Z góry dziękuję za wszystkie odpowiedzi,

Cyjanowodorek

#2

Wydaje mi się, że bez JavaScriptu nie da rady.

A poza tym to nie ten dział. :wink:

#3

Bzdura można i to bardzo prosto, wystarczy przestać wspierać śmieciowe przeglądarki jak IE9.

@OP

<html>
    <body>
        <div style="height:100%; background-color:red;">
            <div style="height:10%; background-color:blue;">My Header</div>
            <div style="height:80%; background-color:green; display:flex;">
                <div style="width:20%;">left</div>
                <div style="width:60%; overflow:auto;">
                    Tu wklej długi tekst
                </div>
                <div style="width:20%;">right</div>
            </div>
            <div style="height:10%; background-color:yellow;">My Footer</div>
        </div>
    </body>
</html>

PS Z właściwością flex związana jest też order. Warto z niej skorzystać, żeby przenieść środek strony w kodzie źródłowym wyżej, ponieważ crawlery wyżej oceniają to co wyżej znajdzie się w kodzie źródłowym strony, a przy długich treściach nie indeksują nawet całości.

#4

To samo można uzyskać korzystając z position:fixed:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="head">header</div>
  <div id="left" class="mid">left</div>
  <div id="right" class="mid">right</div>
  <div id="middle" class="mid">Lorem ipsum ...</div>
  <div id="foot" class="mid">foot</div>
</body>
</html>



body{
padding:0;
margin:0;
}
body>div{
 position:fixed;
}
#head{
 height:10%;
 width:100%;
 background-color:red;
}
#foot{
 top:90%;
 height:10%;
 width:100%;
 background-color:green;
}
.mid{
 top:10%;
 height:80%;
}
#left{
 width:10%;
 background-color:blue;
}
#right{
 left:90%;
 width:10%;
 background-color:black;
 color:white;
}
#middle{
 left:10%;
 width:80%;
 overflow-y:scroll;
background-color:grey;
}
#5

Chyba żartujesz, to robi twój kod na najnowszym Chrome na laptopie o natywnej rozdzielczości 1600x900:

21251154-holder-507f1785685abeca8647c57c

 

tak natomiast wygląda to co zrobi mój:

21251168-holder-0e5617881112e29672b495d1

Nawet nie czytając jego wymagań można spokojnie przyjąć, że 99.9% użytkowników będzie pożądała mojego efektu, a nie tego pierwszego. Poza tym fixed jest strasznie toporne do liczenia przez silnik przeglądarki i osadzanie takich elementów na stronie tylko spowalnia jej renderowanie.

#6

Rzeczywiście “trochę” się posypało, bez bgkolorów nie było tego widać, poprawiłem :slight_smile:

#7

Bzdura byłaby gdybym napisał, że na pewno się nie da, a napisałem, że mi się wydaje. Jak widać nie zrozumiałem pytania.

#8

 

Gratuluję poczucia humoru, jeżeli taka przyświeca Ci filozofia tworzenia stron to gratuluję. Prawdziwy koder napisze tak stronę że działa na wszystkim a nie tylko na jednej przeglądarce.