Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Problem przy powiększaniu strony
Szymciosek
post 23.10.2012, 15:19:23
Post #1





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

Ostrzeżenie: (0%)
-----

Cześć, czemu przy takim kodzie, gdy powiększam stronę: CTRL + "+"

Kod
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <link rel="stylesheet" href="html5reset-1.6.1.css" />
        
        <style>
            body, html {
                width: 100%;
                min-height: 500px;
                background-color: #000000;
            }

            #menu_wrapper {
                position: absolute;
                width: 100%;
                height: 88px;
                bottom: 0;
            }
            #menu_background {
                width: 100%;
                height: 88px;
                background-color: #00ff00;
            }
        </style>
    </head>
    <body>
        <div id="menu_wrapper">
            <div id="menu_background"></div>
        </div>
    </body>
</html>


Pasek na dole po pojawieniu się scrollera zaczyna uciekać do góry ?
Wiem, że jest temu winny min-height, ale jak to naprawić, jak temu zaradzić żeby to zawsze było na dole ?

Ten post edytował Szymciosek 23.10.2012, 15:25:44
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
Arcioch
post 23.10.2012, 15:25:54
Post #2





Grupa: Zarejestrowani
Postów: 324
Pomógł: 110
Dołączył: 18.09.2012

Ostrzeżenie: (0%)
-----

Co chcesz zrobić? Aby ten zielony pasek był zawsze przyklejony do dołu przeglądarki? Wtedy zmieć pozycję z absolute na fixed i powinno grać smile.gif
Go to the top of the page
+Quote Post
Szymciosek
post 23.10.2012, 15:49:26
Post #3





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

Ostrzeżenie: (0%)
-----

Niby dobrze, ale dalej źle...
chodzi o rozwiązanie takie, że ten scroller się nie pojawia w ogóle...

tak u mnie jest ok i mogę powiększyć do max:
Kod
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <link rel="stylesheet" href="html5reset-1.6.1.css" />
        
        <style>
            body, html {
                width: 100%;
                height: 100%;
                background-color: #000000;
            }

            #menu_wrapper {
                position: fixed;
                width: 100%;
                height: 88px;
                bottom: 0;
            }
            #menu_background {
                width: 100%;
                height: 88px;
                background-color: #00ff00;
            }
        </style>
    </head>
    <body>
        <div id="menu_wrapper">
            <div id="menu_background"></div>
        </div>
    </body>
</html>


Chodzi również o to żeby zrobić min-height w przypadku, gdy ktoś korzysta z niskiej rozdzielczości i ten pasek był na dole. Do tego oczywiście dochodzą dodatkowe elementy, które nie powinny się ukrywać. Pod tym paskiem, dlatego chciałem zastosować min-height żeby zawsze wszystko było na miejscu i ewentualnie jeśli zajdzie potrzeba, to włącza się scroller.
Go to the top of the page
+Quote Post
SpiJay
post 24.10.2012, 08:34:26
Post #4





Grupa: Zarejestrowani
Postów: 63
Pomógł: 2
Dołączył: 18.11.2009
Skąd: Grudziądz

Ostrzeżenie: (0%)
-----

Jeżeli chodzi Ci aby pasek na dole utrzymywał mniej więcej tą samą wysokość oraz aby nie pojawiał się scroll, to spróbuj coś takiego:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.  
  7.         <link rel="stylesheet" href="html5reset-1.6.1.css" />
  8.  
  9.         <style>
  10.             body, html {
  11.                 width: 100%;
  12.                 height: 100%;
  13.                 background-color: #000000;
  14. 				margin: 0;
  15.  
  16.             }
  17.  
  18.             #menu_wrapper {
  19.                 position: fixed;
  20.                 width: 100%;
  21.                 height: 12%;
  22.                 bottom: 0;
  23.             }
  24.             #menu_background {
  25.                 width: 100%;
  26.                 height: 100%;
  27.                 background-color: #00ff00;
  28.             }
  29.         </style>
  30.     </head>
  31.     <body>
  32.         <div id="menu_wrapper">
  33.             <div id="menu_background">
  34. 				Test Test Test Test Test Test Test 
  35. 			</div>
  36.         </div>
  37.     </body>
  38. </html>
[HTML] pobierz, plaintext


W pierwszej kolejności resetuj parametry domyślne (margin) oraz nadaj szacunkową wysokość menu w % .


--------------------
zmoderowano - waga i rozmiar
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 14:32
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn