[CSS] vertical div height

Odpowiedz Nowy wątek
2010-12-27 17:11

Rejestracja: 17 lat temu

Ostatnio: 9 lat temu

0

Męczę się z tym tematem od kilku dni. W necie jest kilka rozwiązań ale żadne nie pasuje do mojego problemu albo wręcz jawnie go pomija.

Chodzi o utworzenie 3 poziomych ramek (jedna nad drugą) tak aby górna i dolna ramka miały stałą wysokość a środkowa automatycznie poszerzała się w pionie tak aby dopełnić obszar o nazwie "page"

niestety w div#center atrybut height: 100% powoduje poszerzenie diva poza "page" a height: auto nie robi nic.

Jak to inaczej ugryźć?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>div height</title>
<style type="text/css">
div#center {
  border: 1px solid yellow;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
div#top {
  border: 1px solid black;
  position:relative;
  width: 100%;
  height: 20px;
  top:0; left:0;
}
div#bottom {
  border: 1px solid black;
  position:relative;
  width: 100%;
  height: 40px;
  bottom:0; left:0;
}
div#page {
  border: 1px solid red;
  width: 100%;
  height: 400px;
  position: absolute;
  top:0; left:0;
}
</style>

</head>
<body>
  <div id="page">
    <div id="top">top</div>
    <div id="center">center</div>
    <div id="bottom">bottom</div>
  </div>
</body>
</html>

Pozostało 580 znaków

esz
2010-12-28 00:46
esz

Rejestracja: 9 lat temu

Ostatnio: 8 lat temu

0

Hej, przyznaję, że chwilę zajęło mi rozwiązanie tego problemu, rozwiązanie prezentuję się następująco:

#page {
width:300px;
height:500px;
background:blue;
float:left;
}

#top {
float:left;
width:100%;
background:yellow;
}

#center {
float:left;
width:100%;
background:red;
}

#bottom {
float:left;
width:100%;
background:gray;
}

Deklarujemy funkcję JavaScriptową która to za nas robi (nie da się tego zrobić czystym CSS):

<script type="text/javascript">
function setHeight() {
document.getElementById('center').style.height = 
document.getElementById('page').offsetHeight - 
(document.getElementById('bottom').offsetHeight + document.getElementById('top').offsetHeight)+
'px';
}
</script>

I (BARDZO WAŻNE) w body deklarujemy parametr onload:

<body onload="setHeight();">
edytowany 1x, ostatnio: esz, 2010-12-28 00:47

Pozostało 580 znaków

2010-12-28 04:27

Rejestracja: 17 lat temu

Ostatnio: 9 lat temu

0

Hej, naprawdę działa pięknie :) szkoda że nie da się css'em.
Ten kodzik potrzebuję aby zrobić zautomatyzowane obramowanie z zaokrąglonymi narożnikami. Ogólnie działa to tak, że każdy narożnik jest w transparent png. Do tego dochodzi gif na top,left,right,bottom i cała sztuka polega na tym aby pod narożnikami nie znalazły się gify boczne bo inaczej nie widać pod nimi tła tylko właśnie boczne obramowanie. Jeśli to brzmi dziwnie to podaję kod. Trochę nad tym posiedziałem i myślę, że jest to rozwiązanie uniwersalne i nieskomplikowane w użyciu i ma swoje zalety (np. można użyć dowolnie skomplikowanego tła pod dowolny zestaw ramek)

Styl css

div.core-border { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
div.core-border div.cb-top { position: relative; width: 100%; height: 66px; left: 0; top: 0; }
div.core-border div.cb-top div.cbtl { position: relative; display: inline-block; width: 10px; height: 66px; background: url(../images/core-border-tl.png) 0 0 no-repeat; }
div.core-border div.cb-top div.cbtc { position: relative; display: inline-block; width: 970px; height: 66px; background: url(../images/core-border-t.gif) 0 0 repeat-x; }
div.core-border div.cb-top div.cbtr { position: relative; display: inline-block; width: 10px; height: 66px; background: url(../images/core-border-tr.png) 100% 0 no-repeat; }
div.core-border div.cb-center { position: relative; width: 100%; height: 100%; }
div.core-border div.cb-center div.cbcl { position: relative; display: inline-block; width: 10px; height: 100%; background: url(../images/core-border-l.gif) 0 0 repeat-y; }
div.core-border div.cb-center div.cbcc { position: relative; display: inline-block; width: 970px; height: 100%; background: #d8d8d8; }
div.core-border div.cb-center div.cbcr { position: relative; display: inline-block; width: 10px; height: 100%; background: url(../images/core-border-r.gif) 100% 0 repeat-y; }
div.core-border div.cb-bottom { position: relative; width: 100%; height: 10px; top: -2px; }
div.core-border div.cb-bottom div.cbbl { position: relative; display: inline-block; width: 10px; height: 10px; background: url(../images/core-border-bl.png) 0 0 no-repeat; }
div.core-border div.cb-bottom div.cbbc { position: relative; display: inline-block; width: 970px; height: 10px; background: url(../images/core-border-b.gif) 0 0 repeat-x; }
div.core-border div.cb-bottom div.cbbr { position: relative; display: inline-block; width: 10px; height: 10px; background: url(../images/core-border-br.png) 100% 0 no-repeat; }

Całe obramowanie siedzi w div typu absolute a więc można go dowolnie ustawić

<div class="core-border" id="page">
           <div class="cb-top"><div class="cbtl"></div><div class="cbtc"></div><div class="cbtr"></div></div>
           <div class="cb-center" id="id1"><div class="cbcl"></div><div class="cbcc"></div><div class="cbcr"></div></div>
           <div class="cb-bottom"><div class="cbbl"></div><div class="cbbc"></div><div class="cbbr"></div></div>
         </div>';

Na koniec powyższa funkcja do dopasowania środkowej ramki tak aby obramowanie automatycznie dostosowało swoją wysokość do div'a, którego otacza

<script type="text/javascript">
  function setHeight(id1,id2,height) {
    document.getElementById(id1).style.height = document.getElementById(id2).offsetHeight - height+'px';
  }
</script>

i wywołanie funkcji

<script type="text/javascript">setHeight('page','id1',76);</script>

(76px = div.cb-top height + div.cb-bottom height)

No i niech ktoś powie, że to rozwiązanie nie jest szalone :))

EDIT:
Właśnie zauważyłem, że w Chrome i Safari funkcja setHeight niezbyt dobrze wylicza poprawną wysokość i obramowanie jest za krótkie :(
Zgaduję, że może to wynikać z tego że skrypt uruchamia się za szybko zanim jeszcze przeglądarka poprawnie zinterpretuje height: 100%; w div.core-border.
Pomogła konstrukcja:

<script type="text/javascript">setTimeout("setHeight('page','id1',76),1000)";</script>
edytowany 5x, ostatnio: Real, 2010-12-28 04:46

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0