Fora

Får div-elementet til at fylde det resterende lodrette rum? (css)

floyde

Original plakat
7. april 2005
Monterrey Mexico
  • 27. marts 2006
Er det muligt?
Jeg har to divs. Den ene har en fast højde, og jeg vil have den anden til at fylde det resterende lodrette rum på vinduet. Hvis jeg indstiller den sidstnævnte divs højde til 100 %, vil den få samme højde som vinduet, men jeg vil have, at den skal være højden på vinduet minus højden af ​​den første div.

Dette er koden jeg bruger:
Kode: |_+_|
Jeg inkluderede også nogle billeder, der viser, hvad jeg vil gøre, og hvad jeg har været i stand til indtil nu. Tak på forhånd

Vedhæftede filer

  • xa.gif xa.gif'file-meta'> 2,6 KB · Visninger: 10.076
  • xb.gif xb.gif'file-meta'> 3 KB · Visninger: 9.950
N

NoNameBrand

17. november 2005


Halifax, Canada
  • 27. marts 2006
Hvorfor ikke rede 1. inde i 2.?

Ellers kan jeg ikke komme på en måde, hvorpå du kan få det, du ønsker.

stevep

13. oktober 2004
Storbritannien
  • 27. marts 2006
Jeg tror, ​​det kan være, at du ikke fortæller det andet lag, hvor det skal starte, så det antager, at det starter fra toppen, og derfor overlapper det første lag.
Prøve:




Unavngivet dokument










til






b


c




d


Og







ps jeg snød ved at gøre det i DW, tilføje noget indhold til det andet lag og så rode med koden - DW kan godt lide, at tingene har noget polstring rundt om kanterne, og selvom du kan angive i dialogerne, at du vil have et lag til start ved 0px fra øverste hjørne, du skal fortælle det to gange ved hjælp af kodevisningen. Det måtte jeg i hvert fald.

floyde

Original plakat
7. april 2005
Monterrey Mexico
  • 27. marts 2006
NoNameBrand sagde: Hvorfor ikke rede 1. inde i 2.?

Ellers kan jeg ikke komme på en måde, hvorpå du kan få det, du ønsker.

Tak, det virker visuelt, men den anden div vil være en beholder til dette layout, så jeg har stadig brug for, at den har de rigtige dimensioner, så dens indhold kan arve dem.

Så måske er det simpelthen ikke muligt? Måske skal jeg bruge et lille javascript for at få det til at fungere?

stevep sagde: Prøv:
Tak, men jeg kunne ikke få det til at virke. Hvilken browser brugte du?

floyde

Original plakat
7. april 2005
Monterrey Mexico
  • 27. marts 2006
Tingenes store sammensætning

Ok, her er et billede af mit ultimative mål. Indtil videre har jeg gjort det gradvist, så måske er problemet min første tilgang. Så hvordan ville I gribe dette an (jeg mangler bare ideer)? Ville du bruge ren css, eller ville du give efter for tabeller eller rammer?

Vedhæftede filer

  • grand_scheme.gif grand_scheme.gif'file-meta'> 40,2 KB · Visninger: 450

stevep

13. oktober 2004
Storbritannien
  • 27. marts 2006
Jeg brugte Safari. Kopier og indsæt kodestykket i en tekstfil - sørg for, at den har .html-suffikset, når du gemmer den. Træk derefter bare den nye fil ind i et åbent browservindue. Har lige testet det med Firefox, og det er ok - i det mindste tror jeg, det er det, du vil have.
Det du skal lege med er dette:
#Layer1 {
position:absolut;
venstre:0px;
top:0px;
bredde:100%;
højde:180px;
z-indeks: 1;
baggrundsfarve: #99CCFF;
}

Rul din side ud på et stykke papir, så du får de rigtige positioner, og det vil give dig placeringen af ​​det øverste venstre hjørne af hvert lag. Højden af ​​lag 1 vil bestemme startpositionen for lag 2 - i dette tilfælde skal lag 2 have entop:180px;linje kode.
Hvis du vil have de 3 lag, som du viste i dit sidste indlæg, så vil det mest venstre lag være:
#Layer1 {
position:absolut;
venstre:0px;
top:0px;
bredde:200px;
højde:100%;
z-indeks: 1;
baggrundsfarve: #336699;
}

og det øverste RH-lag vil være:
#Layer1 {
position:absolut;
venstre:200px;
top:0px;
bredde:100%;
højde:180px;
z-indeks: 2;
baggrundsfarve: #33CCFF;
}

og det 3. lag til at udfylde resten af ​​vinduet (uanset størrelsen på det) skal være noget som:
#Layer1 {
position:absolut;
venstre:200px;
top:180px;
bredde:100%;
højde:100%;
z-indeks: 3;
baggrundsfarve: #99CCFF;
}

Det er bedst at lægge noget dummy-indhold i hvert lag, hvis du bruger Dreamweaver, i tilfælde af at laget krymper til ingenting i sidevisning, derfor 'a,b,c etc' i den originale html ovenfor.

ps jeg er ikke ekspert, jeg kan tage fejl, men jeg håber det hjælper. Hvad jeg kan sige er, at min første bit kode ser ud til at virke. Jeg personligt ville ikke indlejre lag, hvis jeg kunne hjælpe med at bide, men det er bare mig - jeg gør kun simpelt. N

NoNameBrand

17. november 2005
Halifax, Canada
  • 27. marts 2006
Hvad er det her 'lag'? er det Dreamweaver-agtigt for 'pause ting' rigtig godt'?

Her er hvad jeg ville gøre:
Kode:
foo   

du tror!

14. juni 2003
MD / VA / DC
  • 27. marts 2006
Deconcept...

Tjek FlashObject ud og i download er der kode til at lave en div fuldskærm.. måske den kan skræddersyes som du vil have den.

http://blog.deconcept.com/flashobject/

floyde

Original plakat
7. april 2005
Monterrey Mexico
  • 28. april 2006
Tak for al hjælpen gutter, men jeg indså lige, at det præcise layout, jeg ønsker, er umuligt at opnå med en kombination af faste bredder/højder og procenter. Jeg omskrev det med kun procenter, og nu virker det. Hvis du er interesseret i markeringen, så lad mig det vide, så sender jeg det.

stevep

13. oktober 2004
Storbritannien
  • 28. april 2006
floyde sagde: Hvis du er interesseret i markeringen, så lad mig det vide, så sender jeg det.
Jeg vil gerne se, om du har tid til at skrive igen.
NoNameBrand sagde: Hvad er det her 'lag'-ting? er det Dreamweaver-agtigt for 'pause ting' rigtig godt'?
Tja, jeg ved ikke om 'breaking stuff', men jeg gætter på, at du gættede på, at jeg ikke er en CSS-boff - lag er et bekvemt navn givet af DW til ting, som jeg synes burde kaldes 'CSS-positionerede elementer' - og Jeg tror, ​​de kalder dem det for at få folk som mig fra en DTP/Photoshop-baggrund til at føle sig lidt mere komfortable. Når man ser på den kode, du har inkluderet i dit indlæg NoNameBrand, er den meget mere elegant end min - jeg bliver nødt til at prøve at få mit hoved til div-tagget. Tak for OP og svarene. N

NoNameBrand

17. november 2005
Halifax, Canada
  • 28. april 2006
stevep sagde: Tja, jeg ved ikke om 'breaking stuff', men jeg gætter på, at du gættede på, at jeg ikke er en CSS-boff - lag er et bekvemt navn givet af DW til ting, som jeg synes burde kaldes 'CSS-positionerede elementer '

De havde også stacking z-indekser på dem - som placerer tingene forfra til bagside på en side. Jeg har set DW-lag før, der fuldstændig knuste et websted, men ellers har jeg ikke haft meget eksponering for dem (det var egentlig nok).

Jeg bliver nødt til virkelig at få hovedet rundt om div-mærket.

A er bare en vilkårlig blokering - det betyder ikke noget semantisk, på samme måde som a

gør (et afsnit af tekst). ENer den samme idé, men for inline ting (som f.eks tag, men igen, semantisk fri).

Den nemmeste ting at gøre for at lære disse ting er at stoppe med at bruge Dreamweaver. Jeg designer mine websteder i Photoshop og gemmer derefter de grafiske elementer, som jeg ønsker, sammen med at notere farvekoder og nogle grove pixelmålinger til justeringsformål, og så koder jeg webstedet i TextWrangler eller VIM.

floyde

Original plakat
7. april 2005
Monterrey Mexico
  • 28. april 2006
stevep sagde: Jeg vil gerne have et kig, hvis du har tid til at skrive igen.
Her er det, der er lidt spansk derinde, jeg håber ikke det er for forvirrende:

Kode:
Grand Scheme html { højde: 100%; } body { margin: 0; polstring: 0; højde: 100%; bredde: 100%; } #venstre, #højre { float: venstre; } #venstre { højde:100%; baggrundsfarve: orange; bredde: 10%; } #right { højde: 100%; stilling:slægtning; bredde: 90%; } #top { baggrundsfarve: blå; højde: 10%; } #fotos { position: relativ; højde: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { height: 50%; bredde: 50%; overløb: auto; position: absolut; } #foto_sup_izq, #foto_sup_der { top: 0; } #foto_sup_der, #foto_inf_der { venstre: 50%; } #foto_inf_izq, #foto_inf_der { top: 50%; } img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg 

Vedhæftede filer

  • img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg'file-meta'> 36,3 KB · Visninger: 405