Har nu börjat få ordning på min sida här; funderar bara på en grej.
Jag har en rad divar som ligger uppifrån och ner i rad. Alla ligger inuti en större div ("outer").

Denna div "outer" kan jag få att fylla upp hela skärmen (med height: 100% och body, html height: 100%).

Då distribueras ju höjden mellan mina olika divar; varje får så stor del som den behöver. Problemet är att den sista diven får allt som blir över.

Alltså
<code>
----------
| aaa |
----------
| bbbbb |
----------
| ccccc |
| ccccc |
| ccccc |
----------
| ddd |
| |
| |
| |
----------
</code>

Men så vill jag ju inte ha det. Jag vill istället att A, B och D ska ta upp så stor plats de behöver, medan
C får resten. Enligt w3 (http://www.w3.org/TR/CSS21/visudet.html#the-height-property) så finns ju bara length, procent, auto och inherit, och det känns inte som någon av dem hjälper mig...

Är det ens möjligt?
Annars får jag köra med fix storlek, men det känns inte så kul...

Ingen som har någon idé?

Jo, men insåg att den är felaktig.

Jag brukar försöka fördela höjden procentuellt om jag har flera divar som ska samsas om höjden.
På så sätt så kan du ju styra att din C div ska få ta större plats.


//Anna-Karin

Har tänkt på det, men tyvärr är det inte det jag vill ha. Det som är grejen är att jag vill att A, B och D ska ta så lite plats som möjligt, men ändå tillräckligt för sitt innehåll.

Jag börjar fundera på att drop:a D och ge hela grejen maximal höjd istället, men jag vill ju att D ska vara där, annars hade jag inte lagt till den...

Så här kan du göra för att få D att ligga längst ned:
<code><style type="text/css">
#all {
height: 100%;
width: 50%;
border: 1px solid red;
position: relative;
}

#a, #b, #c, #d {
border: 1px solid blue;
}

#d {
position: absolute;
width: 100%;
bottom: 0;
}
</style>

<div id="all">

<div id="a">
aaaa
</div>

<div id="b">
bbbb
</div>

<div id="c">
cccc
</div>

<div id="d">
dddd
</div>

</div></code>

Men att få C att ta upp hela det lediga utrymmet är inte lätt. Men det går kanske att få det att se ut som den gör det.

Njae, det där gå ju inte heller. Förstår vad du menar, men hur skulle jag få C att bli "allt som finns över" - "höjden på d"?

Och kommer jag på det så kan jag ju lika gärna göra det med min tidigare metod.

För att inte få några missförstånd:

- Jag kan ha ett element som fyller upp ett antal procent av skärmen. Så fort man ändrar browserfönstret så ändras storleken på elementet.

- Jag kan ha element som fyller upp så stor del som behövs av skärmen (en rad får mindre plats än två rader).

- Om jag sätter element som fyller upp så stor del som behövs först och sist ett element som får all ledig plats så ändras det med storleken på fönstret. Har jag något efter gör den inte det.

Inte helt säker på om jag förstått dig rätt, men kan det vara så här?

<CODE>
<style type="text/css">
#all {
height: 100%;
width: 50%;
border: 1px solid red;
position: relative;
}

#a, #b, #c, #d {
border: 1px solid blue;
}

#d {
width: 100%;
bottom: 0;
}
#C {
width: 100%;
HEIGHT: 100%;
bottom: 0;
}

</style>

<div id="all">

<div id="a">
aaaa
</div>

<div id="b">
bbbb
</div>

<div id="c">
cccc
</div>

<div id="d">
dddd</div>

</div>
</CODE>

Tja, det verkar se rätt ut i IE, och jag har tänkt enligt samma princip tidigare. Tyvärr misstänker jag att det inte gör det i firefox, och då är det inte aktuellt. Har inte möjlighet att testa på firefox här dock, så om någon kan verifiera det hade det varit bra.

Problemet med den där koden som jag ser det är att sidan alltid blir över 100%, dvs scrollbars kommer alltid att visas. Eller gör det inget att det är så?


Thomas

Jo, men det kan man ju i princip fixa genom att sänka den yttre till c:a 70%.

Det borde väl också gå om man tar bort marginalerna över och under sidan.

Det jag tycker är lite kusligt dock, är att det står 100% i c-diven. Det känns för min del som att den korrekta tolkningen är något i stil med:
1. Vi har en storlek på yttre diven, säg 500 px.
2. Vi ger nu div c storleken 100% av detta; 500px.
När jag egentligen har ett antal grejer över och under som gör att det skulle ha blivit 400 px istället.

<b>Jo, men det kan man ju i princip fixa genom att sänka den yttre till c:a 70%.</b>

Men då kommer det väl inte att se lika ut i alla upplösningar? Men det kanske inte märks så mycket.


Thomas

Har testat i FireFox C blir störst men expanderar inte riktigt hela vägen ner.

Nu har jag också testat i Firefox, men kör man med 100% uppstår samma problem på både IE och FF, den hamnar utanför. Jag måste alltså sätta den yttre till något mindre, säg 70%, och det ser hyfsat ut.

Problemet nu är att den "stora diven" slutar halvvägs in i "C", eller ännu värre, ibland in i B eller A. Metoden är nog för besvärlig än, jag kör med ett antal pixlar istället.

Jag har kollat igen och det ser bra ut både i FF och IE