[CSS] Jednoczesne height 100% i center

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
Cotter
Nowy
Nowy
Posty: 69
Rejestracja: pn lut 06, 2006 3:11 pm

[CSS] Jednoczesne height 100% i center

Post autor: Cotter »

Witam,

Chciałem ustawić elementy na stronie tak aby wszystko znajdowało się w divie na środku strony i jednocześnie miało wysokość minimum 100% okna.

Obie rzeczy można uzyskać oddzielnie:
Wyśrodkowanie:

Kod: Zaznacz cały

body
{
	margin: auto;
	font-family: verdana, Arial CE;
	font-size: 10pt;
	text-align: center;
	color: #004400;
	height: 100%;
	background-image: url(../graphics/bg.bmp);
}
div
{
	margin: 0px;
	padding: 0px;
}
#content
{
	position: relative;
	background-color: white;
	background-image: url(../graphics/bottom.jpg);
	background-repeat: no-repeat;
	background-position: bottom center;
	text-align: left;
	width: 785px;
	margin: 0 auto;
	min-height: 100%;
}
#text
{
	margin: 2px 10px 0px 30px;
	padding-left: 140px;
	padding-bottom: 40px;
}
#menu
{
	background-image: url(../graphics/left.jpg);
	background-repeat: no-repeat;
	width: 140px;
	float: left;
	clear: left;
	min-height: 350px;
}
#top
{
	height: 195px;
	background-color: white;
}
#bottom
{
	background-image: url(../graphics/bottom.jpg);
	clear: both;
}
100% wysokości można uzyskać zmieniając ustawienie w content na absolute.

Problem w tym, że jedna rzecz działa tylko z relative (w content) a druga tylko z absolute. Próbowałem wrzucić całość (dla opcji absolute) do innego diva z ustawieniem relative, jednak wtedy 100% wysokości przestaje działać.

Czy jest na to jakiś sposób?


Tak wygląda kod html

Kod: Zaznacz cały

			<div id=content>
			<div id=top>
				<img src="graphics/top.png" alt="ACMI"/>
			</div>
			<div id=menu>
			<ul>
				<li>
					<a href="index.php" class="menu">Strona główna</a>
				</li>
				<li>
					<a href="TODO" class="menu">O nas</a>
				</li>
			</ul>
			</div>
			<div id=text>
				tekst
			</div>
		</div>
Salfunglandyare
Nowy
Nowy
Posty: 88
Rejestracja: śr sty 24, 2007 9:52 pm
Lokalizacja: Kuj-Pom.

Re: [CSS] Jednoczesne height 100% i center

Post autor: Salfunglandyare »

Nie jestem pewien, czy dokładnie to chcesz uzyskać, ale wyrzuć "position: relative;" i wstaw "overflow: hidden;"

pzdr

ps. min-height i podobne nie działają pod IE6 i niżej
ODPOWIEDZ