Prawidłowe wyświetlanie strony, a kwestia rozdzielczości ekranu.

pytanie zadane 2 czerwca 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)
zamknięte 14 czerwca 2017 przez Krzysiek_34

Witam.

Tworzę stronę internetową przy pomocy laptopa o max rozdzielczości ekranu 1366×768 (HD Ready). Od samego początku w sekcji <body> ustaliłem wysokość strony 800px nie zwracając uwagi na to jaką posiadam rozdzielczość ekranu. Wystarczy lekko przejadę w dół scrollem myszki i widzę dolną część strony wraz ze stopką umieszczoną na samym dole.

body
{
	background: #000000 url("obrazki/background/body_background.png");
	font-family: Verdana;
	margin: 0px;
	width: 100%;
	height: 800px;
	position: relative;
}

Jeżeli strona będzie wyświetlana przy pomocy laptopa o max rozdzielczości ekranu 1920×1080 (Full HD), to przy aktualnej wysokości 800px stopka pewnie znajdzie się nad dolną częścią strony, co nie? Teoretycznie powinienem ustalić wysokość min 1200px, aby przy tych obu rozdzielczościach ekranu strona wyświetlała się prawidłowo.

Jaką najlepiej ustalić wysokość strony dla obu tych rozdzielczości ekranu (ewentualnie niższych lub wyższych), aby strona wyświetlała się prawidłowo?

komentarz zamknięcia: Problem został rozwiązany.

2 odpowiedzi

odpowiedź 14 czerwca 2017 przez mitelak Pasjonat (23,330 p.)

Jeżeli rozumiem dobrze to co chcesz osiągnąć to nie ustalaj na sztywno wysokości body. Wysokość kontentu niech będzie od niego zależna czyli im więcej treści tym strona wyższa i na odwrót im mniej tym niższa. Ty chcesz osiągnąć po prostu rozumiem stopkę zawsze na dole https://codepen.io/cbracco/pen/zekgx

komentarz 14 czerwca 2017 przez Krzysiek_34 Mądrala (6,050 p.)
edycja 14 czerwca 2017 przez Krzysiek_34

Tak, stopka ma zostać na samym dole.

Aktualnie body i footer prezentuje się tak:

body
{
	background: #000000 url("obrazki/background/body_background.png");
	font-family: Verdana;
	margin: 0px;
	width: 100%;
	height: 800px;
	position: relative;
}

footer
{
	text-align: center;
	background-color: #191919;
	color: #FC9E00;
	font-family: Calibri;
	font-size: 16px;
	position: absolute;
	bottom: 0;
	width: 1000px;
	line-height: 64px;
	border-top-left-radius:.4em;
	border-top-right-radius:.4em;
	margin-left: auto;
	margin-right: auto;
	z-index: -1;
}

Wobec tego w sekcji <body> zamiast:

height: 800px;

powinienem wpisać:

min-height: 100%;

komentarz 14 czerwca 2017 przez Krzysiek_34 Mądrala (6,050 p.)

Jednak ten min-height: 100%; nie jest zbyt dobrym rozwiązaniem. Lepszym rozwiązaniem jest min-height: 100vh;, gdzie 1vh daje 1% wysokości w sekcji <body>. Dałem min-height: 150vh; i jest OK. Aby zobaczyć stopkę, należy nieco przejechać scrollem w dół.

odpowiedź 2 czerwca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

moje pytanie - po co chcesz ustalać na sztywno w PX wysokość body ?

Napisz co chcesz osiągnąć wizualnie, bo być może od złej strony podchodzisz do rozwiązania problemu - czasami warto na chwilę odejść od kodu i wrócić do niego z "wyzerowaną" głową :)

Pozdrawiam

komentarz 2 czerwca 2017 przez Krzysiek_34 Mądrala (6,050 p.)

Podejrzewam, że każdy ustala w sekcji <body> wysokość w pikselach. Dziwne byłoby, gdyby szerokość (width) była ustalana w pikselach.

komentarz 2 czerwca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

bardziej chodziło mi o w ogóle sam cel ustawiania na szywno wysokości body, a jeśli już to dlaczego w PX a nie np. vh (jeśli możemy odpuścić sobie stare IE). Alternatywnie wysokość można ustalić w JS pobierając innerHeight ale jak już wspomniałem, pytanie po co, gdyż może wcale nie jest to w kolegi layoucie potrzebne i w ogóle w inną stronę pójdziemy z CSS.