Natahovací DIV

~ Anonymní uživatel
~ 8 příspěvků

4. 12. 2008 #1

Ahoj!

Potřebuji udělat stránku o dvou prvcích. Hlavička s fixní výškou (dejme tomu 200px) a DIV s hlavním obsahem, který potřebuji roztáhnout od hlavičky až k dolnímu okraji prohlížeče. Potud by to bylo fajn, pokud by to nemělo fungovat i při různých rozlišeních a resizech, kdy se mi začne objevovat browserovský scrollbar, což je nežádoucí (pokud samozřejmě není výška menší než 200px + obsah DIVu). Řešení jsem našel např. na hotmailu kde mají takto udělané okno s obsahem mailu, ale bohužel jsem nenašel nervy na procházení jejich kódu a jeho testovaní. Nevadilo by mi ani JS řešení. Prosím poraďte.

Přikládám kód :

html {

height: 100%;

}

body {

height: 100%;

margin: 0;

padding: 0;

}

.header {

height: 200px;

}

.text {

height: 100%;

overflow-y: scroll;

}



<div class="header">Hello</div>

<div class="text">Lorem Ipsum</div>

Předem díky za odpověď!
O.

Nahlásit jako SPAM

IP: 77.78.86.–

tom*p0

Stálý člen

6. 12. 2008 #2

co takhle uzavřít header do textu?

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	

	<title></title>

	<style type="text/css">

		html {height: 100%;}

		body {height: 100%; margin: 0; padding: 0; height: 100%;}

		.header {background: #ece; height: 200px}

		.text {background: #cec; height: 100%; overflow-y: scroll;}

	</style>

</head>

<body>

	<div class="text">

		<div class="header">Hello</div> 

		Lorem Ipsum

	</div>

</body>

</html>

Nahlásit jako SPAM

IP: 83.240.120.–

Don't waste your time, or time will waste you.

~ Anonymní uživatel
~ 8 příspěvků

6. 12. 2008 #3

Jasně. To mě samozřejmě taky napadlo, jenže problém je, že pokud přeteče obsah textu, tak scrollbar se zobrazí i přes header. Vnuknul se mi i nápad s absolutním pozicováním a z-indexováním, ale bohužel se stále nemohu dobrat kýženého výsledku. Snad mě přes víkend ještě něco napadne.

Nahlásit jako SPAM

IP: 213.244.172.–

~ Anonymní uživatel
~ 8 příspěvků

6. 12. 2008 #4

Jasně. To mě samozřejmě taky napadlo, jenže problém je, že pokud přeteče obsah textu, tak scrollbar se zobrazí i přes header. Vnuknul se mi ještě nápad s absolutním pozicováním a z-indexováním, ale bohužel se stále nemohu dobrat kýženého výsledku. Snad mě přes víkend něco napadne.

Nahlásit jako SPAM

IP: 213.244.172.–

~ Anonymní uživatel
~ 8 příspěvků

6. 12. 2008 #5