Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Div width
Forum PHP.pl > Forum > Przedszkole
Szymoneks12
31.07.2010, 13:14:34
Mam diva w divie.

Div nr.1 (główny) ma w sobie diva nr.2.


No i div nr. 1 ma height 100% i width 65%. Jest on wyśrodkowany.

Div nr.2 ma 50% height i 100% width. Ma on scrolla pionowego.

Tyle że scroll nie działa, a strona się wydłuża. Co robię źle?

--------------------------------------------------------------------------------------------

Kod:

HTML:

[HTML] pobierz, plaintext 
  1. <div class="strona">
  2. BLABLABLA
  3.  
  4.                  <div id="wyborprezentu">
  5.                            BLABLABLA
  6.                   </div>
  7.  
  8. BLABLABLA
  9. </div>
[HTML] pobierz, plaintext


CSS:
[CSS] pobierz, plaintext 
  1. div.strona {
  2.  
  3.     background-color: yellow;
  4.     border: 5px ridge;
  5.     border-color: #000000;
  6.     margin-left: auto; 
  7.     margin-right: auto;
  8.     width:  65%;
  9.     height: 100%;
  10.  
  11. }
  12.  
  13. div#wyborprezentu {
  14.  
  15.     overflow: auto;
  16.     height: 50%;
  17.     border: 5px ridge;
  18.     border-color: #333333;
  19.  
  20. }
[CSS] pobierz, plaintext

blahy
31.07.2010, 13:23:25
jak wpiszesz wiecej tekstu to sie bedzie scrollowal ten w wyborprezentu. a jak zmieniasz wymiary okna to bedzie zmienial swoja wielkosc bo jest na procent. wg mnie dizala to tak jak opisales ze chcesz zeby dzialalo (przynajniej na chrome)
krzysztof_kf
31.07.2010, 13:36:53
Działa także na FF tylko wpisz więcej tekstu bo jak myślisz że przy jednym słowie zaraz pokaże się scroll ? smile.gif
Szymoneks12
31.07.2010, 13:44:05
Ja mam w operze i scrolla nie widać (wpisałem bardzo dużo tekstu), natomiast strona się rozciąga w dół.
gigzorr
31.07.2010, 13:45:45
to daj overflow: scroll?
Szymoneks12
31.07.2010, 13:55:32
Pojawiają się dwa zablokowane scrolle. (Pionowy i poziomy)
malminiart
31.07.2010, 14:06:03
pojawiaja sie dwa zablokowane scroll'e bo zawartosc nie wymaga jeszcze scrollowania snitch.gif

co do height: 100% to dziala tylko jezeli parent zagniezdzonego div'a ma okreslona wysokosc... bez tego nie wie jaka ona jest (tak po krotce)

oto rozwiazanie

Kod
<style type="text/css">
html, body {               /*<<<<<<<<<<<<<<<<<<< dodanie height:100% do sekcji body i html */
height: 100%;
}

div.strona {

    background-color: yellow;
    border: 5px ridge;
    border-color: #000000;
    margin-left: auto;
    margin-right: auto;
    width:  80%;
    height:100%;

}

div#wyborprezentu {

    overflow: auto;
    height: 30%;
    width: 80%;
    border: 5px ridge;
    margin:0px auto;
    border-color: #333333;

}
</style>

</head>
<body>
<div class="strona">
DIV 80% szerokosci i  100% wysokosci

                 <div id="wyborprezentu">
                           DIV 80% szerokosci rodzica i 30% wysokosci rodzica
                  </div>


</div>
</body>
</html>
gigzorr
31.07.2010, 14:07:23
Cytat(Szymoneks12 @ 31.07.2010, 14:55:32 ) *
Pojawiają się dwa zablokowane scrolle. (Pionowy i poziomy)



to daj overflow-x: hidden albo y i ci zniknie ktorys tam , a rozwinie sie jak bedzie duzoooo tresciiiii.
krzysztof_kf
31.07.2010, 15:51:38
A masz odpowiedni Typ dokumentu ? jaką masz operę z przed świecznych lat ? aktualizujesz w ogóle .
Szymoneks12
2.08.2010, 20:27:02
Niestety nie mogę dodać:
[CSS] pobierz, plaintext 
  1. html, body {
  2. height: 100%;
  3. }
[CSS] pobierz, plaintext


Mogę tylko mieć:
[CSS] pobierz, plaintext 
  1. body {
  2. height: 100%;
  3. }
[CSS] pobierz, plaintext


Inaczej strona się "rozjeżdża". Nie ma innego sposobu?

Link: http://prezenty.c0.pl/wyborprezentu.php
XP'ek
2.08.2010, 20:45:39
w css wstaw sobie to 

[CSS] pobierz, plaintext 
  1. overflow-y:scroll;
  2. overflow-x:hidden;
[CSS] pobierz, plaintext

tylko odpowiednio na swoje potrzeby jak coś modyfikacje zrób smile.gif
Szymoneks12
3.08.2010, 15:38:10
Rozwiązałem problem.



Rozwiązanie:

max-height w CSS-ie.


Do zamknięcia.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.