• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dwa błędy ze źle działającym pionowym scrollbarem

VPS Starter Arubacloud
0 głosów
151 wizyt
pytanie zadane 19 sierpnia 2017 w HTML i CSS przez edwardo Nowicjusz (140 p.)

Witam.

Borykam się z nietypowym problemem, z którym walczę od kilku dni bez rezultatów, w związku z czym zwracam się do Was o pomoc.

Problem dotyczy strony https://hurko.pl/regulamin.html

Na swojej stronie internetowej mam dwa problemy ze scrollbarem. 

Pierwszy z nich polega na tym, że domyślnie po prawej stronie wyświetla się "pusty" scrollbar, mimo, że nie ma takiej potrzeby. Użycie "overflow-y: hidden;" nie pomaga. Domyślam się, że jest to spowodowane użyciem "height: 100vh" w kodzie strony przez co przeglądarka dodaje puste marginesy i stąd zapewne pusty scrollbar. Próbowałem obcinać te marginesy u góry i dołu, ale nic to nie dało.

Drugi problem polega na tym, że zmniejszając okienko przeglądarki na podstronie https://hurko.pl/regulamin.html

scrollbar nie spełnia swojego zadania i jest nadal "pusty" zamiast umożliwić przewijanie strony. 

Przez ten błąd strona jest ucięta w zależności od wielkości rozmiaru okna przeglądarki i nie można jej przewinąć.

Próbowałem dodać "overflow-y: scroll;" i co prawda wtedy działa poprawnie, ale dodaje to drugi scroll obok tego pustego, przez co dwa scrolle są obok siebie i brzydko to wygląda.

Kodu strony nie wrzucam, bo byłoby tego zbyt dużo. Kod można wyświetlić z linków zamieszczonych powyżej.

Będę bardzo wdzięczny za pomoc w rozwiązaniu tych dwóch problemów.

Dziękuję i pozdrawiam.

1 odpowiedź

0 głosów
odpowiedź 19 sierpnia 2017 przez Chess Szeryf (76,710 p.)
edycja 19 sierpnia 2017 przez Chess

Wydaje mi się, że gdy dasz html{overflow-y:auto} to już będzie OK.

Edit:

Wyrzuć: .kontener{ position: fixed }, ponieważ na Firefox brak jest wtedy scroll-bar'a, nie wiem jak na innych przeglądarkach. A tak po za tym wydaje mi się, że źle to zaprojektowałeś.

Edit2:

Dla tła daj to:

img.bg {
   
  min-height: 100%;
  min-width: 1024px;
	
  width: 100%;
  height: auto;
   
  position: fixed;
  top: 0;
  left: 0;
}

Nie musisz tego pisać na <img ... /> jak coś.

A dla <div class="my_class_p"> daj to:

div.my_class_p{
   position:relative;
   background:white
}

Źródło:

https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php

https://css-tricks.com/perfect-full-page-background-image/

Całość może wyglądać np. tak:

<style>
body{ 
	background:grey;
	margin:0;
	padding:0;
}
img.bg {
   
  min-height: 100%;
  min-width: 1024px;
	
   
  width: 100%;
  height: auto;
	
   
  position: fixed;
  top: 0;
  left: 0;
}
div.my_class_p { 
  position:relative; 
  background:white 
}
</style>

<img src="https://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg" class="bg"/>
<div class="my_class_p">333</div>

 

komentarz 19 sierpnia 2017 przez Chess Szeryf (76,710 p.)

U Ciebie jest to .kontener.

komentarz 19 sierpnia 2017 przez edwardo Nowicjusz (140 p.)
Chyba sobie odpuszczę... Mi chodzi o to, żeby wizualnie było tak jak teraz tylko żeby scrollbar działał. Twój sposób powoduje to, że tło (obrazek) nie dopasowuje się automatycznie do rozdzielczości strony, tylko wycina się fragment.

Przerasta mnie to.
komentarz 19 sierpnia 2017 przez Chess Szeryf (76,710 p.)
edycja 19 sierpnia 2017 przez Chess

W tamtych dwóch komentarzach wprowadziłem Cię w błąd, podpatrz na ten kod i dostosuj go pod siebie. Trochę namieszałem, teraz powinieneś to napisać mniej więcej tak:

<!DOCTYPE html>
<html>
<head>
<title>Regulamin łowiska</title>
<meta charset="utf-8">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<style>
body{ 
margin:0;
padding:0;
}
.bgded{ 
 
   position:relative;
  
   background:white;
   width:500px;
   margin-left:auto;
   margin-right:auto;
}	
img.kontener {
    
  min-height: 100%;
  min-width: 1024px;
     
  width: 100%;
  height: auto;
    
  position: fixed;
  top: 0;
  left: 0;
}
</style>
</head>

<body id="top">
<img src="https://hurko.pl/img/logo2.jpg" class="kontener">
 
<div class="bgded" style="background-image:url('img/logo2.jpg');"> 
  <div class="wrapper overlay">
    <header id="header" class="hoc clear">
      <nav id="mainav" class="clear"> 
        <ul class="clear">
          <li><a href="index.html">Strona główna</a></li>
          <li><a href="lowisko.html">O łowisku</a></li>
          <li><a href="galeria.html">Galeria zdjęć</a></li>
          <li><a href="cennik.html">Cennik</a></li>
          <li class="active"><a href="regulamin.html">Regulamin</a></li>
		  <li><a href="kontakt.html">Kontakt</a></li>
		  <li><a href="dojazd.html">Dojazd do łowiska</a></li>
        </ul>
      </nav>
    </header>
  </div>
  <div id="regulamin" class="hoc clear"> 
    <article>
      <div class="introtxt">
        <h1 class="heading">Regulamin łowiska</h1>
        <p>1) Na łowisku obowiązuje bezwzględny zakaz zabierania złowionych ryb, oraz wymagane jest stosowanie zasady "Złów i Wypuść".</p>
		<p>2) Obowiązuje zakaz połowu ryb na żywca.</p>
		<p>3) Łowienie odbywa się z brzegu tylko na wyznaczonych stanowiskach (nie dotyczy spinningistów).</p>
		<p>4) Zmiana miejsca wędkowania jest możliwa w porozumieniu z opiekunem łowiska pod warunkiem, że istnieje wystarczająca ilość wolnych stanowisk.</p>
		<p>5) Dozwolone jest łowienie na 2 wędki spławikowe lub gruntowe.</p>
		<p>6) Na stanowisku mogą przebywać osoby towarzyszące bez możliwości łowienia (nie dotyczy dzieci do 14 lat).</p>
		<p>7) Młodzież w wieku do 16 lat w porze nocnej może łowić tylko z opiekunem.</p>
		<p>8) Zajmowanie stanowiska i wędkowanie powinno odbywać się w taki sposób, aby nie przeszkadzać innym wędkującym.</p>
		<p>9) Każdy powinien posiadać przy sobie dowód tożsamości w celu okazania przy wypisywaniu zezwolenia.</p>
		<p>10) Prawo do przebywania na łowisku mają osoby posiadające aktualne zezwolenie.</p>
		<p>11) Zakaz używania plecionki jako linki głównej bądź jako przyponu strzałowego. Używać można wyłącznie żyłek o średnicy co najmniej 0,30 mm (wyłacznie KARPIARZE - osób łowiących na spinning i spławik nie dotyczy).</p>
		<p>12) Niedozwolone jest nęcenie surowymi zbożami: kukurydza, łubin, pszenica, jęczmień, oraz paszami, itp.</p>
		<p>13) Przy wędkowaniu metodą włosową należy używać haków bez zadziorowych.</p>
		<p>14) Fotografowanie złowionych ryb dozwolone jest wyłącznie nad matą z zachowaniem szczególnej ostrożności, regularnie polewać wodą.</p>
		<p>15) Od karpiarzy obowiązkowo wymagane jest posiadanie:</p>
		<p>• podbieraka o rozstawie ramion ~1 metra </p>
		<p>• maty karpiowej</p>
		<p>• środka do dezynfekcji ran </p>
		<p>16) Na łowisku obowiązuje zakaz:</p>
		<p>• zaśmiecania terenu,</p>
		<p>• niszczenia roślinności,</p>
		<p>• parkowania samochodów poza wyznaczonym miejscem (po rozpakowaniu sprzętu samochód należy niezwłocznie odstawić na parking),</p>
		<p>• załatwiania potrzeb fizjologicznych poza WC,</p>
		<p>• rozpalania ognisk ,</p>
		<p>• kąpieli na łowisku,</p>
		<p>• głośnego zachowania, picia alkoholu.</p>
		<p>17) Stanowisko wędkowania należy pozostawić w czystości i porządku (śmieci zabieramy ze sobą). Przed wyjazdem zostanie ono sprawdzone przez opiekuna łowiska.</p>
		<p>18) Właściciel łowiska nie ponosi odpowiedzialności za wypadki losowe, oraz rzeczy pozostawione na łowisku.</p>
		<p>19) Osoby, które dokonały zniszczenia mienia na łowisku mogą być pociągnięte do odpowiedzialności cywilnej.</p>
		<p>20) Istnieje możliwość przedłużenia pobytu, tylko wtedy gdy stanowisko nie jest zarezerwowane przez innego wędkarza.</p>
		<p>21) Odpowiedzialność za osoby towarzyszące ponosi osoba która wykupiła zezwolenie na wędkowanie.</p>
		<p>22) Dzienny połów ryb odbywa się w godz. od 6-20 (w miesiącach letnich), a nocny od 19-7po wcześniejszym zgłoszeniu powyżej 5 osób.</p>
		<p>23) Łamanie regulaminu oraz zachowanie niezgodne z ogólnie przyjętymi normami, powoduje wyproszenie z łowiska bez możliwości zwrotu kosztów oraz odmówienie sprzedaży pozwolenia na wędkowanie w przyszłości.</p>
		<p>24) Wykupując licencję wyraża się zgodę na ewentualne dokonanie przez gospodarza łowiska, lub opiekuna łowiska kontroli środka transportu i rzeczy osobistych w momencie podejrzenia złamania regulaminu łowiska.</p>
		<p>25) W 2017 roku istnieje możliwość zakupu ryb tylko od właściela, lub opiekuna łowiska.</p>
      </div>
      
    </article>
  </div>
</div>
 
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
</body>
</html>

 

komentarz 19 sierpnia 2017 przez edwardo Nowicjusz (140 p.)

Dziękuję! smiley Biorę się do pracy!

komentarz 19 sierpnia 2017 przez edwardo Nowicjusz (140 p.)
edycja 19 sierpnia 2017 przez edwardo

Chess jeszcze raz Ci dziękuję! Całość jest taka jak chciałem! Dzięki!!!

Podobne pytania

0 głosów
0 odpowiedzi 86 wizyt
pytanie zadane 31 stycznia 2018 w HTML i CSS przez TheFunny Gaduła (3,420 p.)
0 głosów
1 odpowiedź 220 wizyt
pytanie zadane 10 lipca 2018 w HTML i CSS przez Jan Machelski Nowicjusz (200 p.)
0 głosów
0 odpowiedzi 104 wizyt

92,452 zapytań

141,262 odpowiedzi

319,080 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...