Fylla ut resterande utrymme

3 svar · 291 visningar · startad av Mika3l 10 aug. 2005

Mika3lMedlem sedan nov. 20018 492 inlägg

Frågan10 aug. 2005 23:56#1

Har tre divar med bestämd höjd, nedanför dessa så vill jag ha en div som tar den plats som är kvar så att hela webbläsarfönstret fylls om informationen inte skulle räcka till. Vill även ha ett mellanrum på 20px om informationen väl skulle räcka.
Hur ska jag gå till väga (om det ens är möjligt)?

<div id="top" style="position: absolute; height: 15px; width: 700px; background: #DBDCDD; top: 0px; left: 0px;">
&nbsp;
</div>

<div id="logo" style="position: absolute; width: 700px; height: 130px; top: 15px; left: 0px;">
<img src="images/logo.jpg" alt=" DE TRE VÄNNERNA OCH JIMMY " style="width: 700px; height: 130px; border: 0px;" />
</div>

<div id="menu" style="position: absolute; width: 700px; height: 25px; top: 145px; left: 0px; background: #DBDCDD;">
<table cellspacing="0" cellpadding="0" border="0">
 <tr>
  <td style="width: 15px;">
&nbsp;
  </td>
  <td style="width: 685px; height: 25px;" valign="middle">
<a href="#" class="menu">STARTSIDAN</a>
<a href="#" class="menu">OM OSS</a>
<a href="#" class="menu">BILDARKIV</a>
<a href="#" class="menu">HÖ-T-T-SCH-T</a>
<a href="#" class="menu">LISTOR</a>
<a href="#" class="menu">PÅ GÅNG</a>
  </td>
 </tr>
</table>
</div>

<div id="content" style="position: absolute; width: 700px; height: 100%; left: 0px; top: 170px; background: #EEEEEE;">
Hej hej!
</div>

<div id="verticalline" style="position: absolute; width: 1px; height: 100%; background: #C1C1C1; left: 700px; top: 0px;">
</div>

CalevanMedlem sedan maj 20031 173 inlägg

11 aug. 2005 00:24#2

Det låter onekligen som du vill göra ungefär det jag ville här:
http://www.webforum.nu/showthread.php?s=&threadid=129332&forumid=12

och det verkar som det inte gick att göra, så det ser nog mörkt ut. men kanske någon här kläcker något smart.

Mika3lMedlem sedan nov. 20018 492 inlägg

11 aug. 2005 00:26#3

Läste den tråden precis! :o

Men jag funderar på om det inte går att fixa m.h.a margin-bottom. Testade att sätta margin-bottom till +/-170px men det hjälpte inte, men det kanske går att utveckla på något sätt?

Mika3lMedlem sedan nov. 20018 492 inlägg

11 aug. 2005 12:22#4

Löste det hela m.h.a z-index.

Numera så ser min kod ut så här:

<div id="logo" style="position: absolute; width: 700px; height: 130px; top: 0px; left: 0px; z-index: 2;">
<img src="images/logo.jpg" alt=" DE TRE VÄNNERNA OCH JIMMY " style="width: 700px; height: 130px; border: 0px;" />
</div>

<div id="menu" style="position: absolute; width: 700px; height: 25px; top: 130px; left: 0px; background: #DBDCDD; border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; z-index: 2;">
<table cellspacing="0" cellpadding="0" border="0">
 <tr>
  <td style="width: 15px;">
&nbsp;
  </td>
  <td style="width: 685px; height: 25px;" valign="middle">
<a href="#" class="menu">STARTSIDAN</a>
<a href="#" class="menu">OM OSS</a>
<a href="#" class="menu">BILDARKIV</a>
<a href="#" class="menu">HÖ-T-T-SCH-T</a>
<a href="#" class="menu">LISTOR</a>
<a href="#" class="menu">PÅ GÅNG</a>
  </td>
 </tr>
</table>
</div>

<div id="contentbackground" style="position: absolute; width: 700px; height: 100%; left: 0px; top: 0px; background: #EEEEEE; z-index: 1;">
&nbsp;
</div>

<div id="content" style="position: absolute; width: 640px; left: 30px; top: 180px; z-index: 2;">
Hej hej!
</div>

<div id="verticalline" style="position: absolute; width: 1px; height: 100%; background: #C1C1C1; left: 700px; top: 0px; z-index: 2;">
</div>