Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

overflow: hidden + height: 100%

Rozpoczął zonic, cze 21 2014 19:28

Najlepsza odpowiedź Yeoman, 21 czerwca 2014 - 22:48

Może spróbuj:

overflow-y: hidden;

Albo podaj to w <html>, a nie w body ?

Przejdź do postu


35 odpowiedzi w tym temacie
  • Zamknięty Temat jest zamknięty
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 21 czerwca 2014 - 19:28

#1

Hej, 

nie mogę ogarnąć jednego tematu. Chciałbym aby sekcje były w pełni dopasowane do rozdzielczości na fullscreenie i aby pasek przewijania został ukryty :)

Jakoś jedno mi się gryzie z drugim.

Tutaj przykład strony, na której możemy bazować: http://www.bootply.com/render/129806

Mamy fajnie full screena na każdej sekcji, ale kłopoty pojawiają się przy dodaniu dla body:

overflow:hidden;

Niestety, ale height: 100% mi nie pomaga...


  • 0

Papierowe wizytówki NFC

Michał

    Stary wyjadacz

  • 301 postów
    • Czas spędzony online: 16d 7h 11m 3s
95
Znakomita!

Napisano 21 czerwca 2014 - 19:42

#2

overflow: hidden; dla body, i height: 100%; dla każdej takiej sekcji powinno działać.
Jednakże wtedy blokujesz przewijanie 'rollerem' na myszce.
W Google Chrome Scrollbar'a można ostylować:


:-webkit-scrollbar { 
    display: none;
}

  • 1
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 21 czerwca 2014 - 19:44

#3

 

overflow: hidden; dla body, i height: 100%; dla każdej takiej sekcji powinno działać.
Jednakże wtedy blokujesz przewijanie 'rollerem' na myszce.
W Google Chrome Scrollbar'a można ostylować:


:-webkit-scrollbar { 
    display: none;
}

No właśnie robiłem tak jak mówisz. Ale to blokuje ten efekt przejścia do innej sekcji też. 


  • 0

Papierowe wizytówki NFC

Michał

    Stary wyjadacz

  • 301 postów
    • Czas spędzony online: 16d 7h 11m 3s
95
Znakomita!

Napisano 21 czerwca 2014 - 19:55

#4

Zrobiłem tak na tej stronie co podałeś, i wszystko działa poprawnie (prócz oczywiście przewijania 'rollerem').

Hmm- tak się zastanawiam czy nie zależy to od przeglądarki.


  • 1
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 21 czerwca 2014 - 19:57

#5

Zrobiłem tak na tej stronie co podałeś, i wszystko działa poprawnie (prócz oczywiście przewijania 'rollerem').

Hmm- tak się zastanawiam czy nie zależy to od przeglądarki.

Mi na operze i chromie (webkit) nie przechodzi do sekcji kolejnych po kliknięciu w pozycję menu.


  • 0

Papierowe wizytówki NFC

Michał

    Stary wyjadacz

  • 301 postów
    • Czas spędzony online: 16d 7h 11m 3s
95
Znakomita!

Napisano 21 czerwca 2014 - 20:19

#6

Będzie ciężko na chwilę obecną znaleźć jakieś sensowne rozwiązanie.

Na stacku znalazłem link do tego:
http://jsfiddle.net/uB6Dg/1/
Myślę, że jak wpakujesz cały content strony do tych divów, powinno zadziałać, z tym, że ciężko będzie to dopasować do maksymalnej szerokości.


  • 1
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 21 czerwca 2014 - 22:40

#7

Nie przemawia jakoś do mnie tego typu rozwiązanie :D

 

Mam wrażenie, że o czymś zapominam i coś pomijam... i że da się to prosto i sensownie rozwiązać 


  • 0

Papierowe wizytówki NFC

Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 21 czerwca 2014 - 22:48   Najlepsza odpowiedź

#8

Może spróbuj:

overflow-y: hidden;

Albo podaj to w <html>, a nie w body ?


  • 2

2ed58r7.png

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 21 czerwca 2014 - 23:21

#9

Może spróbuj:

overflow-y: hidden;

Albo podaj to w <html>, a nie w body ?

No kuźwa mistrz :D Myślałem, że wszystkie możliwe kombinacje sprawdziłem... A wygląda na to, że rozwiązaniem problemu jest:

html{
	overflow-y: hidden;
}

a reszta kodu bez zmian. 

Co prawda nie jest to odpordne na zmniejszanie strony (Ctrl i +/-), ale jak odpalimy stronę na zoom 50% na przykład to sekcje są na fullscrenie. Nie wiem, czy wiecie o co chodzi :D

W sensie, że jak widzę jedną sekcję na fullscrenie. Wcisnę kilka razy Ctrl i minus to już widzę na ekranie dwie sekcję. Ale jak odświeże, to juz te jedną sekcję mam na fullscreenie.


  • 0

Papierowe wizytówki NFC

Michał

    Stary wyjadacz

  • 301 postów
    • Czas spędzony online: 16d 7h 11m 3s
95
Znakomita!

Napisano 21 czerwca 2014 - 23:33

#10

Z tym overflow-y: hidden; dla <head> masz pewnie słabe wsparcie przeglądarek- nie działa mi na chrome.  :D


  • 1
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 21 czerwca 2014 - 23:37

#11

Z tym overflow-y: hidden; dla <dead> masz pewnie słabe wsparcie przeglądarek- nie działa mi na chrome.  :D

Jak nie działa :) Testuję i działa. Nie ma scrolla, a "goto #section" śmiga.


  • 0

Papierowe wizytówki NFC

Michał

    Stary wyjadacz

  • 301 postów
    • Czas spędzony online: 16d 7h 11m 3s
95
Znakomita!

Napisano 22 czerwca 2014 - 09:49

#12

No "go to" śmiga, ale nie roller :) (a przynajmniej u mnie).


  • 1
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 22 czerwca 2014 - 09:52

#13

No "go to" śmiga, ale nie roller :) (a przynajmniej u mnie).

Ale ja właśnie nie chcę żeby scroll myszki działał :D Przejścia odbywać się będą wyłącznie po wciśnięciu danego buttona z danej sekcji. Na zasadzie odpowiedzi na pytanie i w zależności od odpowiedzi strona leci do danej sekcji :)


  • 0

Papierowe wizytówki NFC

Michał

    Stary wyjadacz

  • 301 postów
    • Czas spędzony online: 16d 7h 11m 3s
95
Znakomita!

Napisano 22 czerwca 2014 - 09:55

#14

Teraz mi to mówisz? :D
A ja się głowię co tu zrobić, żeby ten cholerny roller działał.  :D


  • 1
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 22 czerwca 2014 - 10:06

#15

Teraz mi to mówisz? :D
A ja się głowię co tu zrobić, żeby ten cholerny roller działał.  :D

Myślałem, że to było jasne już na początku :D Pisałem też  tym w innym temacie, gdzie również mi pomagałeś :D 

Nieważne. Jakoś działa :D dzięki za pomoc!


  • 0

Papierowe wizytówki NFC

Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 22 czerwca 2014 - 10:30

#16

Co prawda nie jest to odpordne na zmniejszanie strony (Ctrl i +/-), ale jak odpalimy stronę na zoom 50% na przykład to sekcje są na fullscrenie. Nie wiem, czy wiecie o co chodzi

 

Rozumiem to w ten sposób że jak zmniejszasz to w pewnym momencie sekcja traci height 100% ?


  • 0

2ed58r7.png

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 22 czerwca 2014 - 11:29

#17

Rozumiem to w ten sposób że jak zmniejszasz to w pewnym momencie sekcja traci height 100% ?

Tak. Traci 100% i jest mniejsza. Ale jak odświeżę na tej sekcji, gdzie w url mam "#sectionx" to pojawia się z height 100%


  • 0

Papierowe wizytówki NFC

Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 22 czerwca 2014 - 11:36

#18

Mozliwe że to po prostu błąd przy zmniejszaniu. Moim zdaniem to zmniejszanie jest niezbyt rzetelne.


  • 0

2ed58r7.png

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 22 czerwca 2014 - 11:44

#19

Nie wszystkie przeglądarki ogarniają overflow-y: hidden;

Ja to zazwyczaj ogarniam na zasadzie że daje wszystko w diva i jemu ustawiam position fixed; width:100%; height:100% i wszystko śmiga jak trzeba.


  • 2

webDeveloper

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 22 czerwca 2014 - 14:23

#20

Nie wszystkie przeglądarki ogarniają overflow-y: hidden;

Ja to zazwyczaj ogarniam na zasadzie że daje wszystko w diva i jemu ustawiam position fixed; width:100%; height:100% i wszystko śmiga jak trzeba.

A które nie ogarniają?


  • 0

Papierowe wizytówki NFC

Wróć do HTML i CSS



Podone tematy Collapse

  Temat Forum Autor Podsumowanie Ostatni post

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych