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:
<!DOCTYPE html> <http://december.com/html/4/element/html.html class="no-js"> <http://december.com/html/4/element/head.html> <http://december.com/html/4/element/meta.html charset="utf-8"> <http://december.com/html/4/element/meta.html http-equiv="X-UA-Compatible" content="IE=edge"> <http://december.com/html/4/element/title.html>Testowa</http://december.com/html/4/element/title.html> <http://december.com/html/4/element/link.html rel="icon" type="image/png" href="/favicon.png"> <http://december.com/html/4/element/meta.html name="description" content=""> <http://december.com/html/4/element/meta.html name="viewport" content="width=device-width, initial-scale=1"> <http://december.com/html/4/element/link.html rel="Stylesheet" type="text/css" href="style.css" /> </http://december.com/html/4/element/head.html> <http://december.com/html/4/element/body.html> <http://december.com/html/4/element/div.html id="header_01">HEADER</http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html id="info_02">INFO</http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html id="menu_03">MENU</http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html id="content_04">Lorem ipsum dolor sit amet</http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html id="footer_05">FOOTER</http://december.com/html/4/element/div.html> </http://december.com/html/4/element/body.html> </http://december.com/html/4/element/html.html>
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; }
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)