Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Problem ze scrollem w DIVie

Zaczynasz dopiero swoją przygodę z HTML'em? A może mimo swojego doświadczenia natknąłeś się na jakiś problem? Tutaj na pewno znajdziesz pomoc.

Problem ze scrollem w DIVie

Post 18.02.2010, 12:05:38

Robie stronę na DiVach. W DIVie "matka" są dwa divy jeden pod drugim. Górny div będzie miał zmięnną wysokość. Dolny div ma zająć cały pozostały obszar. Górny div ma być bez scrolla a dolny ze scrollem.
Mam taki kod:
plik index.html:

Kod: Zaznacz cały
<html>
   <head>
   <link rel="stylesheet" href="style.css" type="text/css" />
   </head>
<body>

<div id="matka">
   <div id="okno1">
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

   </div>
   <div id="okno2">
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   </div>
   </div>
</body>

</html>



plik style.css
Kod: Zaznacz cały
#matka {
width: 500px;height:100;overflow: hidden;
}
 
#okno1 {
float: left;
width: 500px;

background-color: #c1c1c1;
overflow: hidden;
}
 
#okno2 {
float: left;
width: 500px;

background-color: #4444;
overflow: scroll;
}


Jak widac tutaj: http://zamoto.mydevil.net/div coś jest nie tak ze scrolem dolnego diva.
Co robię źle?
zamoto
Posty: 4
Dołączył(a): 18.02.2010

Post 18.02.2010, 12:43:25

div#matka ma wysokość 100px. Divy znajdujące się wewnątrz po prostu się nie mieszczą i są przycinane do tej wysokości za sprawą overflow: hidden. Nadaj obu tym divom wysokość taką, by się zmieściły w tych 100px i powinno być dobrze (ewentualnie daj divowi#matka większą wysokość zamiast tych 100px).

Tak przy okazji - zamiast overflow: scroll w dolnym divie powinieneś użyć overflow: auto. Z overflow: scroll dolny div (niepotrzebnie) dostanie poziomy suwak.
kds71
Posty: 330
Dołączył(a): 16.08.2006

Post 18.02.2010, 12:57:11

100px to tylko przykład. Chodzi o to, że nie mogę nadać temu divowi konkretnej wysokości. Wiem, że dolny się nie mieści. Celowo dałem tyle tekstu, żeby się nie mieścił. Górny ma się cały mieścić. Mam pewność że nigdy nie będzie miał 100. Znam tylko jego maksymalną i minimalną wysokość ale dolny na pewno będzie bardzo długi stąd chce żeby był tam prawy scroll.
zamoto
Posty: 4
Dołączył(a): 18.02.2010

Post 18.02.2010, 13:21:19

@zamoto:
Bez JS się nie obejdzie.

Pozdrawiam
BIMAS = BioInformatics and Molecular Analysis Section
Avatar użytkownikabimas
Maciej Bimek

Posty: 5974
Dołączył(a): 22.01.2005
Lokalizacja: Poznań

Post 18.02.2010, 14:46:36

bimas napisał(a):@zamoto:
Bez JS się nie obejdzie.


To może jakaś wskazówka?
zamoto
Posty: 4
Dołączył(a): 18.02.2010

Post 18.02.2010, 14:53:49

zamoto napisał(a):To może jakaś wskazówka?
sprawdź wysokość #okno1 i odejmij wartość od wysokości #matka. Wynikiem będzie wysokość jaką musisz nadać elementowi #okno2.

Pozdrawiam
BIMAS = BioInformatics and Molecular Analysis Section
Avatar użytkownikabimas
Maciej Bimek

Posty: 5974
Dołączył(a): 22.01.2005
Lokalizacja: Poznań

Post 18.02.2010, 15:16:08

jak nie będzie wyjścia to będę musiał to zrobić w js ale czy na pewno nie da się tego zrobić w html/css? tak, żeby po prostu pole się rozciągało?
zamoto
Posty: 4
Dołączył(a): 18.02.2010

Post 18.02.2010, 15:34:46

Żeby uzyskać przewijanie w pionie _musisz_ ustalić wysokość - bez tego nie uzyskasz tego efektu.

Pozdrawiam
BIMAS = BioInformatics and Molecular Analysis Section
Avatar użytkownikabimas
Maciej Bimek

Posty: 5974
Dołączył(a): 22.01.2005
Lokalizacja: Poznań

Post 21.02.2010, 12:08:45

po pierwsze w przykłądzie dla matka nie nadałeś wysokości, (zapomniałeś po wartości height:100 dodać px) ale nie wiem po co js po prosty div matka i div okno1 nie nadajesz wysokości, a dla okna 2 nadajesz stałą wysokość i overflow:auto, mam nadzieję że o to Ci chodzi,
Kod: Zaznacz cały
#matka {
width: 500px; overflow: hidden; border: 5px solid #F00;
}
 
#okno1 {
float: left;
width: 498px;

background-color: #c1c1c1;
overflow: hidden;
}
 
#okno2 {
   margin: 10px 0 0 0;
float: left;
width:498px;
height: 200px;
overflow:auto;

background-color: #4444;
overflow: scroll;
}

Kod: Zaznacz cały
<div id="matka">
   <div id="okno1">
   <h1>okno 1</h1>
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
     tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

   </div>
   <div id="okno2">
   <h1>okno 2</h1>
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
   </div>
   </div>
vernalis
Posty: 43
Dołączył(a): 10.04.2007


Powrót do Początkujący webmaster


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 5 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51503 zarejestrowanych użytkowników.
Najnowszy użytkownik: Robertven


Nasi użytkownicy napisali:

  • 937832 wiadomości
  • w 247504 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)