Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Div na 100% wysokości okna jak w IE
piechnat
post
Post #1





Grupa: Zarejestrowani
Postów: 45
Pomógł: 0
Dołączył: 5.12.2004

Ostrzeżenie: (0%)
-----

Witam…

Jak zrobić warstwę, która będzie miała wysokość 100%, gdy tekstu w niej będzie mało, a kiedy tekstu będzie więcej niż wysokość to warstwa zwiększy swoje rozmiary dostosowując się do wysokości tekstu (jak w IE) a nie tak, że tekst wyjedzie za nią, zostanie ucięty lub pojawią się paski przewijania?

Jak na razie wymyśliłem sposób w JS, ale to chyba nie jest dobre opierać layout na skrypcie?

Kod
<script>
  function winHeight() {
    if (typeof window.innerHeight == 'number') return innerHeight;
    return document.getElementsByTagName('html')[0].offsetHeight;
  }
  onload = onresize = function() {
    var box = document.getElementById('box');
    var tmp = winHeight() - box.offsetTop;
    if (tmp < 0) tmp = 0;
    box.style.height = tmp + 'px';
  }
</script>
<style>
  html, body { background: green; }
  body { text-align: center; margin: 0px; padding: 0px; border: 0px; }
  #content { background: yellow; width: 600px; margin: 0px auto; }
</style>
<div id="content">
  text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text
  <div id="box"></div>
</div>
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
matid
post
Post #2





Grupa: Zarejestrowani
Postów: 362
Pomógł: 0
Dołączył: 18.02.2004
Skąd: Knurów

Ostrzeżenie: (0%)
-----

A próbowałeś tak:
Kod
html,body
{
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #003366;
    text-align: center;
}
div#container
{
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    width: 500px;
    background-color: #fefefe;
}

i do tego przykładowy html:
[code]
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">    
  4. 	<head>
  5. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 		<link rel="stylesheet" type="text/css" href="style.css" />
  7. 		<title>Test</title>
  8. 		<?xml-stylesheet type="text/css" href="style.css"?>
  9.     </head>
  10. 	<body xml:lang="en">
  11.         <div id="container">
  12.             Test
  13.         </div>
  14.     </body>
  15. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- piechnat   Div na 100% wysokości okna jak w IE   15.06.2005, 11:32:15
- - elessar   a nie mozesz poprostu zrobic tak: [HTML] pobierz, ...   15.06.2005, 12:42:35
- - revyag   Cytat(elessar @ 2005-06-15 12:42:35)a nie moz...   15.06.2005, 12:50:04
- - matid   A próbowałeś tak: Kodhtml,body { height: 100%...   16.06.2005, 06:38:42
- - piechnat   Dzieki serdeczne, o to chodziło, nigdy sie nawet n...   16.06.2005, 13:15:31
- - Marcin_m   Fajnie, tylko co zrobić jeżeli chcę mieć na górze ...   22.06.2005, 17:20:27
- - -SaraniS-   Przepraszam za odgrzebywanie, ale ja problem rozwi...   3.08.2005, 04:30:17

« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 14.10.2025 - 11:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn