Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Automatyczne dopasowanie wysokości
Forum PHP.pl > Forum > Przedszkole
patryk9200
Cześć,
Zrobiłem małą stronę, w której centrum znajduje się ramka z treścią i chciałbym zrobić tak aby część elementów strony dopasowywała się do jej wysokości automatycznie. Jak to zrobić?
Oto mój kod css:
CODE
p { margin-left: 30px; }
a:link {color: black;}
a:visited {color: black;}
a:hover {color: red;}
a:active {cecha: gray;}
a img{border:0;}

html, body {
text-align: center;
margin: 0;
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#iframecenter {
height: 895;
width: 475;
border: 0;
}

#logowanie{
height: 895;
width: 475;
frameborder: 0;
}

#menuadmin {

height: 100;
text-align: left;
color: blue;
}

#center {
height: 900px;
width: 780px;
margin-left: auto;
margin-right: auto;
height: 1000px;

}
#LOGO {

height: 150px;
}


#NAGLOWEK {
background-image: url(img/menu_nav_top.jpg);
background-color: #888;
height: 25px;
text-align: left;
}

#MENUL {
height: 900px;
text-align: left;
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#MENUBELKA{
background-image: url(img/menu_nav_top.jpg);
height: 25px;
text-align: left;
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#MENUODSTEP{
height: 5px;
text-align: left;
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}


#INFORMACJE {
height: 900px;
width: 150px;
float: right;
overflow: hidden;
background-color: #ccc;
}

#TRESC {
height: 900px;
width: 480px;
float: left;
overflow: hidden;
background-color: #fff;
}

#STOPKA {
clear: both;
width: 100%;
background-color: #888;
}
bluesqad
Które elementy się maja autodopasowywać?
patryk9200
postanowiłem że usuwam ramkę, strona jest w php i chciałem robić bez przeładowania całej zawartości.
Po drobnej modyfikacji usunąłem ramkę i wsadziłem wszystko w środkowego DIVa (tresc).
Chciałbym aby jego wysokość minimalna to była 1000px i w razie wyższej zawartości się powiększał a wraz z nim MENUL i informacje oraz center w który jest głównym divem.
Savage.Mephisto
Jeśli dobrze zrozumiałem, to div'y mają się zachowywać podobnie jak tabela.
Aby osiągnąć ten efekt do sekcji div#center daj:

Kod
    
    min-height: 1000px;
    height: auto !important;
    height: 1000px;
    overflow: visible;


Dodatkowo:

Kod
div#MENUL, div#center { padding-bottom: 20000px; margin-bottom: -20000px; }


Po tym zabiegu warstwa MENUL będzie miała taką samą wysokość jak warstwa center.
Lejto
może się przydać: http://vivee.info/2008/01/10/kolumny-rowne...ca-css/#more-70
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.