+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [xHTML][CSS][JQ] Dopasowanie strony do rozdzielczości ekranu. (/thread-xhtml-css-jq-dopasowanie-strony-do-rozdzielczo%C5%9Bci-ekranu)
[xHTML][CSS][JQ] Dopasowanie strony do rozdzielczości ekranu. - kadobe - 17-08-2013
Witam, w jaki sposób mogę przygotować stronę, która będzie dopasowana do każdego ekranu? Chcę ją podzielić na 3 poziome pasy - nagłówek, content, stopka. Nie chodzi mi tutaj o podział procentowy tj. nagłówek 10%, content 80% i stopka 10%, a o to, żeby nagłówek, który powiedzmy ma 100px był przyległy na każdej rozdzielczości ekranu do górnej granicy okna, natomiast stopka (50px) do granicy dolnej. Ruchomy miałby być content.
RE: [xHTML][CSS][JQ] Dopasowanie strony do rozdzielczości ekranu. - msx83 - 17-08-2013
RE: [xHTML][CSS][JQ] Dopasowanie strony do rozdzielczości ekranu. - kadobe - 17-08-2013
RE: [xHTML][CSS][JQ] Dopasowanie strony do rozdzielczości ekranu. - msx83 - 17-08-2013
No pewnie, że masz możliwość.
CSS:
Kod:
html, body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#fbb5b8;
padding:10px;
}
#middle {
padding:10px;
padding-bottom:60px; /* Wysokość nagłówka */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Wysokość nagłówka */
background:#b5fbbd;
}
.vertical-center {
height: 200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}Kod:
<div id="container">
<div id="header"></div>
<div id="middle">
<div class="vertical-center">Div wyśrdkowany w pionie</div>
</div>
<div id="footer"></div>
</div>