Div na całą wysokość Opcje

[m4tx]

Witam.

Tworzę stronę, no i potrzebuję ustawić div'a na całą wysokość. Ustawiłem więc dla html, body i tego div'a (#top) height 100%, i działa, lecz jak zmniejszę okno przeglądarki tak, aby pojawił się pionowy pasek przewijania, po przewinięciu, w dolnej części strony nie ma tła.

Adres strony to www.socrates-comenius.za.pl

Proszę o pomoc
Z góry dziękuję
Pozdrawiam

[krzysztof_kf]

dla top dodaj

[CSS] pobierz, plaintext 
 
#top { 
overflow: hidden;
[CSS] pobierz, plaintext 

[m4tx]

Teraz się w ogóle pasek przewijania nie pojawia...

[krzysztof_kf]

ustaw dla topu

[CSS] pobierz, plaintext 
height: auto;
[CSS] pobierz, plaintext 

[m4tx]

Jak daję height auto to tak jakbym w ogóle nie dał tego height (tło jest na całą stronę, ale jeśli przeglądarka jest większa od strony to na dole jest przestrzeń niewypełniona tłem)

[krzysztof_kf]

wyrzuć ze stopki

[CSS] pobierz, plaintext 
#stopka {
 clear: both;
[CSS] pobierz, plaintext 

i dla selektora o nazwie #stopka

[CSS] pobierz, plaintext 
#stopka { 
float: left;
[CSS] pobierz, plaintext 

Plus wyrzuć z

[CSS] pobierz, plaintext 
html, body { 
height: 100%; // po co to 
[CSS] pobierz, plaintext 

dla top dodaj

[CSS] pobierz, plaintext 
#top { 
overflow: hidden;
[CSS] pobierz, plaintext 

Ten post edytował krzysztof_kf 3.06.2010, 13:50:52

[m4tx]

Jak tak zrobię to mi wychodzi to co wcześniej napisałem:

tło jest na całą stronę, ale jeśli przeglądarka jest większa od strony to na dole jest przestrzeń niewypełniona tłem

A co do komentarza "// po co to" to już odpowiadam - ano po to, żeby mi rozciągało tą stronę na całe okno przeglądarki

Ten post edytował m4tx 3.06.2010, 13:57:38

[krzysztof_kf]

Może inaczej wklej to i problem rozwiązany bo nadajemy na innych falach

[CSS] pobierz, plaintext 
.tekst {
	text-align: justify;
}
 
.gora {
	border: none;
	margin-left: 10px;
}
 
.stopka {
	text-align: center;
}
 
h1 {
	margin-top: 0px;
}
 
html, body {
	background-color: #ccc;
	background-image: url(../img/background.gif);
	color: #000;
	margin: 0;
	padding: 0;
}
 
 
 
#top {
	background-image: url(../img/tlotop.png);
	background-repeat: repeat-y;
	width: 980px;
	height: 100%;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}
 
#NAGLOWEK {
	text-align: center;
}
 
#MENU {
	width: 170px;
	float: left;
	margin-left: 15px;
	overflow: hidden;
}
 
#TRESC {
	width: 760px;
	float: left;
	overflow: hidden;
	padding-left: 10px;
}
 
#STOPKA {
        float: left;
	width: 100%;
}
 
/* Menu: poczatek */
 
dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}
 
dt {
	width: 128px;
	padding: 5px 10px;
	font-weight: bold;
	font-size: larger;
	text-align: center;
	background: #797 url("../img/tlo2.gif") repeat-x top;
	color: #eff;
	border-width: 1px;
	border-style: solid;
	border-color: #dfe #365 #365 #dfe;
}
 
dd {
	width: 139px;
	padding-left: 10px;
	background: #797 url("../img/strzalka.png") no-repeat left top;
	border-width: 1px;
	border-style: solid;
	border-color: #dfe #365 #365 #dfe;
	font-size: 13px;
}
 
dl a:link, dl a:visited {
	display: block;
	width: 117px;
	text-decoration: none;
	padding: 5px 10px;
	font-weight: bold;
	background: #bfb url("../img/tlo1.gif") repeat-x top;
	color: #365;
	border-left: 1px solid #797;
}
 
dl a:hover {
	background-color: #797;
	background-image: url("../img/tlo2.gif");
	color: #eff;
}
 
/* Menu: koniec */
 
 
#menu{
  overflow: hidden;
  background: #888;
  padding: 0px;
  font: 13px Arial, Verdana, Tahoma;
  width: 962px;
  margin-left: auto;
  margin-right: auto;
}
 
ul#menu li{
  list-style-type: none;
  float: left;
}
 
ul#menu li a{
  display: block;
  padding: 8px;
  color: #fff;
  text-decoration: none;
}
 
ul#menu li li a{
  width: 160px;
  padding: 5px 0px;
}
 
ul#menu li li:hover{
  background: #999;
}
 
ul#menu li ul{
  overflow: hidden;
  display:none;
}
 
ul#menu li:hover ul{
  position: absolute;
  background: #aaa;
  padding:0;
  border:1px solid #999;
  display: block;
  width: 160px;
}
[CSS] pobierz, plaintext 

DZIAŁA ?

Ten post edytował krzysztof_kf 3.06.2010, 14:06:01

[m4tx]

NIE, NIE DZIAŁA.

Ale ja też może zaprezentuję to teraz nieco inaczej.

Mój kod:
1. Część dobra:
KLIK
2. Część zła:
KLIK



Twój kod:
3. Część dobra:
KLIK
4. Część zła:
KLIK


Tobie może działa, bo masz pewnie inną przeglądarkę... Moja to Firefox 3.6. Tyle, że mi chodzi o to, żeby to na wszystkich działało (IMG:style_emoticons/default/smile.gif)

[Damonsson]

[HTML] pobierz, plaintext 
.tekst {
	text-align: justify;
}
 
.gora {
	border: none;
	margin-left: 10px;
}
 
.stopka {
	text-align: center;
}
 
h1 {
	margin-top: 0px;
}
 
html, body {
	margin:0;
	padding:0;
	height:100%; 
	background-image: url(../img/background.gif);
	color: #000;
}
 
#top {
	position:relative; 
	margin:0 auto; 
	width: 980px;
	background-image: url(../img/tlotop.png);
	background-repeat: repeat-y;
 
	height:auto !important; 
	height:100%; 
 
	min-height:100%; 
}
 
 
 
#NAGLOWEK {
	text-align: center;
}
 
#MENU {
	padding:1em 15px 15em;
	width: 170px;
	float:left;
/*
	overflow: hidden;
*/
}
 
 
#TRESC {
	padding:1em 10px 15em; 
	width: 760px;
}
 
 
 
#STOPKA {
  	clear:both;
	position:absolute;
	width:100%;
	bottom:0; 
}
 
/* Menu: poczatek */
 
dl, dt, dd {
	display: block;
	margin: 0;
	padding: 0;
}
 
dt {
	width: 128px;
	padding: 5px 10px;
	font-weight: bold;
	font-size: larger;
	text-align: center;
	background: #797 url("../img/tlo2.gif") repeat-x top;
	color: #eff;
	border-width: 1px;
	border-style: solid;
	border-color: #dfe #365 #365 #dfe;
}
 
dd {
	width: 139px;
	padding-left: 10px;
	background: #797 url("../img/strzalka.png") no-repeat left top;
	border-width: 1px;
	border-style: solid;
	border-color: #dfe #365 #365 #dfe;
	font-size: 13px;
}
 
dl a:link, dl a:visited {
	display: block;
	width: 117px;
	text-decoration: none;
	padding: 5px 10px;
	font-weight: bold;
	background: #bfb url("../img/tlo1.gif") repeat-x top;
	color: #365;
	border-left: 1px solid #797;
}
 
dl a:hover {
	background-color: #797;
	background-image: url("../img/tlo2.gif");
	color: #eff;
}
 
/* Menu: koniec */
 
 
#menu{
  overflow: hidden;
  background: #888;
  padding: 0px;
  font: 13px Arial, Verdana, Tahoma;
  width: 962px;
  margin-left: auto;
  margin-right: auto;
}
 
ul#menu li{
  list-style-type: none;
  float: left;
}
 
ul#menu li a{
  display: block;
  padding: 8px;
  color: #fff;
  text-decoration: none;
}
 
ul#menu li li a{
  width: 160px;
  padding: 5px 0px;
}
 
ul#menu li li:hover{
  background: #999;
}
 
ul#menu li ul{
  overflow: hidden;
  display:none;
}
 
ul#menu li:hover ul{
  position: absolute;
  background: #aaa;
  padding:0;
  border:1px solid #999;
  display: block;
  width: 160px;
}
[HTML] pobierz, plaintext 

Pokombinuj tam jedynie z marginesami i paddingami bo już mi się nie chciało Ci tam dokładnie ustawiać tak jakbyś chciał.

Działa nawet na IE6 (IMG:style_emoticons/default/smile.gif)

EDIT: Nudziło mi się to paddingi jako tako Ci poustawiałem tak jak miałeś chyba (IMG:style_emoticons/default/smile.gif)

Ten post edytował Damonsson 3.06.2010, 17:40:25

[230005]

Kod stąd: http://fortysevenmedia.com/blog/archives/m...y_put_with_css/ jest niezawodny, choć co prawda dla nieco innego przypadku.

[m4tx]

Dzięki wielkie, Damonsson! Twój kod działa dokładnie tak, jak chciałem! Te paddingi trochę źle poustawiałeś, ale to już sobie poprawiłem. Jeszcze raz wielkie dzięki, nie tylko Tobie, ale wszystkim osobom biorącym udział w tym temacie.