Jump to content
php.lv forumi

fixed header & footer; auto-height content


gurkjis

Recommended Posts

man nesanāk izveidot izkārtojumu ar šādām prasībām:

  • headeris un footeris: platums 100%, augstums fiksēts, pozīcija fiksēta, headeris viewporta augšā, footeris apakšā
  • kreisā kolonna: platums fiksēts, augstums dinamisks - aizpilda brīvo vietu starp headeri un footeri
  • labā kolonna: platums aizpilda brīvo vietu, ko atstāj kreisā kolonna, augstums -aizpilda brīvo vietu starp headeri un footeri
  • kolonnu child div elementiem jāprot izstiepties visas kolonnas augstumā.

 

izveidoju divus variantus - vienu ar tabulu un otru ar diviem.

Tabulas variantā problēma tāda, ka child elements neprot izstiepties šūnas augstumā, kā arī uz dažādiem browseriem savādāk renderējas.

Divu variantā kolonnu divi neprot aizpildīt brīvo vietu starp headeri un footeri; tiem uzlikts 100% height, tāpēc stiepjas pāri footerim.

 

kā man šito dabūt gatavu ? varbūt kāds ir veidojis dizainu ar šādu izkārtojumu ? Iespējams, ka to var panākt ar freimiem, bet tas būtu tizli.

Link to comment
Share on other sites

ohmygod: absolute bottom 0 nozīmē footeri novietot viewporta apakšējā malā. Man vajag, lai viss lapas saturs ietilptu vienā ekrānā, bez skrollbariem. Skrollbari būs labo un kreiso kolonnu child diviem.

 

kā tas ir - relatīvi ? Kā kolonnas zinās, cik daudz izstiepties, lai aizpildītu brīvo augstumu starp headeri un footeri ?..

Link to comment
Share on other sites

te skice, apskaidrībai.

 

izkartojums.png

 

mārča variants derēs, ja kreisajā kolonnā childs mācēs izstiepties pa atlikušo brīvo augstumu.

 

edit: labi, laikam būs vienkārši jāieliek fiksēts augstums kolonnām, ar iespējamību,ka visa lapa jāpaskrollē,lai redzētu footeri. nebūs precīzs rezultāts, bet līdzīgs.

 

edit: sanāca ar tabulu. Tikai uz <= IE7 kaut kas gļuko ar augstumiem. paste.php.lv

Edited by gurkjis
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...