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:
<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="icon" type="image/png" href="/favicon.png"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="Stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html>
style.css
body{ position:relative; margin:0 auto; } #header_01{ position:absolute; z-index: 1; width: 100%; height: 250px; background-color: red; text-align: center; } #info_02{ position:absolute; z-index: 2; top:250px; width:100%; height:40px; background-color: yellow; text-align: center; } #menu_03{ position:absolute; z-index: 4; top:290px; width:100%; background-color:black; text-align: center; } #content_04{ position:relative; z-index: 3; top:340px; width:100%; height:520px; text-align: center; } #footer_05{ position:absolute; z-index: 5; top:860px; width:100%; height: 100px; background-color: brown; text-align: center; }