Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS] jenoczesne DIVy z position relative i absolute, problem ze stopką
damianooo
post 12.09.2017, 21:25:39
Post #1





Grupa: Zarejestrowani
Postów: 456
Pomógł: 2
Dołączył: 15.07.2011
Skąd: Katowice

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


Próbuję zaprojektować wygląd strony tak aby był responsywny.
Zrobiłem sobie menu rozwijalne (tylko na urządzeniach mobilnych) dlatego właściwość POSITION elementu DIV , w którym mam kontent (który jest pod DIVem MENU) strony ustawiłem na RELATIVE a pozostałe mam na ABSOLUTE, dzięki temu menu rozwija mi się ładnie na kontent strony a nie np. pod.

Problem w tym że pod DIV CONTENT mam jeszcze DIV na FOOTER któremu jak ustawię POSITION na ABSOLUTE to przy większej ilości danych w kontencie dane wędrują mi pod DIVa FOOTER.

Jak powienienem ustawić stopkę aby zsuwała się w dół zgodnie z ilością wprowadzonych danych na dowolnej stronie ?
Może inaczej powinienem ustawić position dla poszczególnych DIVów ?

test.html:

  1. <!DOCTYPE html>
  2. <html class="no-js">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>Testowa</title>
  7. <link rel="icon" type="image/png" href="/favicon.png">
  8. <meta name="description" content="">
  9. <meta name="viewport" content="width=device-width, initial-scale=1">
  10. <link rel="Stylesheet" type="text/css" href="style.css" />
  11. </head>
  12. <body>
  13.  
  14. <div id="header_01">HEADER</div>
  15. <div id="info_02">INFO</div>
  16. <div id="menu_03">MENU</div>
  17. <div id="content_04">Lorem ipsum dolor sit amet</div>
  18. <div id="footer_05">FOOTER</div>
  19.  
  20. </body>
  21. </html>



style.css
  1. body{
  2. position:relative;
  3. margin:0 auto;
  4. }
  5.  
  6. #header_01{
  7. position:absolute;
  8. z-index: 1;
  9. width: 100%;
  10. height: 250px;
  11. background-color: red;
  12. text-align: center;
  13. }
  14.  
  15. #info_02{
  16. position:absolute;
  17. z-index: 2;
  18. top:250px;
  19. width:100%;
  20. height:40px;
  21. background-color: yellow;
  22. text-align: center;
  23. }
  24.  
  25. #menu_03{
  26. position:absolute;
  27. z-index: 4;
  28. top:290px;
  29. width:100%;
  30. background-color:black;
  31. text-align: center;
  32. }
  33.  
  34. #content_04{
  35. position:relative;
  36. z-index: 3;
  37. top:340px;
  38. width:100%;
  39. height:520px;
  40. text-align: center;
  41. }
  42.  
  43. #footer_05{
  44. position:absolute;
  45. z-index: 5;
  46. top:860px;
  47. width:100%;
  48. height: 100px;
  49. background-color: brown;
  50. text-align: center;
  51. }


Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 10.12.2019 - 02:45