Forumuri

Faceți ca elementul div să umple spațiul vertical rămas? (css)

floyde

Poster original
7 aprilie 2005
Monterrey Mexic
  • 27 martie 2006
Este posibil?
Am două div-uri. Unul are o înălțime fixă ​​și vreau ca celălalt să umple spațiul vertical rămas pe fereastră. Dacă setez înălțimea celui din urmă div la 100%, o va face la aceeași înălțime ca și fereastra, dar vreau să fie înălțimea ferestrei minus înălțimea primului div.

Acesta este codul pe care îl folosesc:
Cod: |_+_|
Am inclus și câteva imagini care arată ce vreau să fac și ce am reușit să fac până acum. Mulțumesc anticipat

Atasamente

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

NoNameBrand

17 noiembrie 2005


Halifax, Canada
  • 27 martie 2006
De ce să nu cuibăresc primul în interiorul celui de-al doilea?

Altfel, nu mă pot gândi la o modalitate prin care vei obține ceea ce îți dorești.

step

13 octombrie 2004
Regatul Unit
  • 27 martie 2006
Cred că s-ar putea să nu-i spui celui de-al doilea strat de unde trebuie să înceapă, așa că presupunem că începe de sus, suprapunându-se astfel primul strat.
Încerca:




Document fara titlu










la




b


c






d


Și







ps. Am înșelat făcând-o în DW, adăugând conținut la al doilea strat și apoi încurcându-mă cu codul - DW-ului îi place ca lucrurile să aibă niște umplutură în jurul marginilor și chiar dacă puteți specifica în casetele de dialog că doriți să faceți un strat începe de la 0px din colțul de sus, trebuie să-l spui de două ori, folosind vizualizarea codului. A trebuit oricum.

floyde

Poster original
7 aprilie 2005
Monterrey Mexic
  • 27 martie 2006
NoNameBrand a spus: De ce să nu cuib primul în interiorul celui de-al doilea?

Altfel, nu mă pot gândi la o modalitate prin care vei obține ceea ce îți dorești.

Mulțumesc, funcționează vizual, dar al doilea div va fi un container pentru acest aspect, așa că încă am nevoie ca acesta să aibă dimensiunile adecvate, astfel încât conținutul său să le poată moșteni.

Deci poate pur și simplu nu este posibil? Poate că va trebui să folosesc puțin javascript pentru a-l face să funcționeze?

stevep a spus: Încearcă:
Mulțumesc, dar nu am putut să funcționeze, ce browser ai folosit?

floyde

Poster original
7 aprilie 2005
Monterrey Mexic
  • 27 martie 2006
Marea schemă a lucrurilor

Ok, iată o poză cu scopul meu final. Până acum am făcut-o treptat, așa că poate problema este abordarea mea inițială. Deci, cum ați aborda asta (am nevoie doar de idei)? Ați folosi css pur sau ați ceda tabele sau cadre?

Atasamente

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

step

13 octombrie 2004
Regatul Unit
  • 27 martie 2006
Am folosit Safari. Copiați și inserați fragmentul de cod într-un fișier text - asigurați-vă că are sufixul .html când îl salvați. Apoi trageți noul fișier într-o fereastră deschisă a browserului. Tocmai l-am testat cu Firefox și e ok - cel puțin cred că este ceea ce vrei.
Partea cu care trebuie să te joci este aceasta:
#Layer1 {
poziție: absolut;
stânga: 0px;
sus:0px;
latime:100%;
înălțime: 180px;
indicele z: 1;
culoare de fundal: #99CCFF;
}

Rulați pagina pe o bucată de hârtie, astfel încât să obțineți pozițiile corecte, iar asta vă va oferi poziția colțului din stânga sus al fiecărui strat. Înălțimea stratului 1 va determina poziția de început a stratului 2 - în acest caz, stratul 2 trebuie să aibă osus: 180px;linie de cod.
Dacă doriți cele 3 straturi așa cum le arătați în ultima postare, atunci stratul cel mai din stânga va fi:
#Layer1 {
poziție: absolut;
stânga: 0px;
sus:0px;
lățime: 200px;
inaltime:100%;
indicele z: 1;
culoare de fundal: #336699;
}

iar stratul superior din dreapta va fi:
#Layer1 {
poziție: absolut;
stânga: 200px;
sus:0px;
latime:100%;
înălțime: 180px;
indicele z: 2;
culoare de fundal: #33CCFF;
}

iar al treilea strat pentru a umple restul ferestrei (oricum ar fi redimensionat) ar trebui să fie ceva de genul:
#Layer1 {
poziție: absolut;
stânga: 200px;
sus: 180px;
latime:100%;
inaltime:100%;
indicele z: 3;
culoare de fundal: #99CCFF;
}

Cel mai bine este să puneți niște conținut fals în fiecare strat dacă utilizați Dreamweaver, în cazul în care stratul se micșorează la nimic în vizualizarea paginii, de unde „a,b,c etc” din html-ul original de mai sus.

ps nu sunt un expert, poate ma insel dar sper sa te ajute. Ceea ce pot spune este că primul meu fragment de cod pare să funcționeze. Eu personal nu aș cuibărește straturi dacă aș putea ajuta puțin, dar asta sunt doar eu - fac doar simplu. N

NoNameBrand

17 noiembrie 2005
Halifax, Canada
  • 27 martie 2006
Ce este chestia asta cu „straturi”? este Dreamweaver-esque pentru „chestii de pauză foarte bune”?

Iată ce aș face:
Cod:
foo   

tu crezi!

14 iunie 2003
MD / VA / DC
  • 27 martie 2006
Deconcept...

Verificați FlashObject și în descărcare există cod pentru a face un div fullscreen.. poate că poate fi adaptat așa cum doriți.

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

floyde

Poster original
7 aprilie 2005
Monterrey Mexic
  • 28 martie 2006
Mulțumesc pentru tot ajutorul băieților, dar tocmai mi-am dat seama că aspectul exact pe care îl doresc este imposibil de realizat cu o combinație de lățimi/înălțimi fixe și procente. L-am rescris folosind doar procente și acum funcționează. Dacă sunteți interesat de marcaj, anunțați-mă și îl voi posta.

step

13 octombrie 2004
Regatul Unit
  • 28 martie 2006
floyde a spus: Dacă sunteți interesat de marcaj, anunțați-mă și îl voi posta.
Aș dori să arunc o privire dacă ai timp să postezi din nou.
NoNameBrand a spus: Ce este chestia asta cu „straturi”? este Dreamweaver-esque pentru „chestii de pauză foarte bune”?
Ei bine, nu știu despre „lucrurile de rupere”, dar cred că ați bănuit că nu sunt un boff CSS - straturile sunt un nume convenabil dat de DW lucrurilor care cred că ar trebui să fie numite „elemente poziționate CSS” - și Cred că le numesc așa pentru a-i face pe oameni ca mine dintr-un fundal DTP / Photoshop să se simtă puțin mai confortabil. Privind codul pe care l-ați inclus în postarea dvs. NoNameBrand, este mult mai elegant decât al meu - va trebui să mă străduiesc să-mi înțeleg cu adevărat eticheta div. Mulțumesc pentru OP și răspunsuri. N

NoNameBrand

17 noiembrie 2005
Halifax, Canada
  • 28 martie 2006
stevep a spus: Ei bine, nu știu despre „lucrurile de rupere”, dar cred că ați bănuit că nu sunt un boff CSS - straturile sunt un nume convenabil dat de DW lucrurilor care cred că ar trebui să fie numite „elemente poziționate CSS”. '

Aveau, de asemenea, stivuire z-index pe ele - care poziționează lucrurile față în spate pe o pagină. Am văzut straturi DW înainte de a sparge total un site, dar altfel nu am avut prea multă expunere la ele (a fost suficient, într-adevăr).

Va trebui să fac o încercare să-mi trec cu adevărat capul în jurul etichetei div.

A este doar un bloc arbitrar - nu înseamnă nimic semantic, așa cum a

face (un paragraf de text). Aeste aceeași idee, dar pentru lucruri inline (cum ar fi a etichetă, dar din nou, fără semantică).

Cel mai ușor lucru de făcut pentru a învăța aceste lucruri este să nu mai folosiți Dreamweaver. Îmi proiectez site-urile în Photoshop și apoi salvez elementele grafice pe care le doresc, împreună cu notarea codurilor de culoare și a unor măsurători aproximative de pixeli în scopuri de aliniere, apoi codific site-ul în TextWrangler sau VIM.

floyde

Poster original
7 aprilie 2005
Monterrey Mexic
  • 28 martie 2006
stevep a spus: Aș dori să arunc o privire dacă ai timp să postezi din nou.
Iată, există puțină spaniolă acolo, sper să nu fie prea confuz:

Cod:
Grand Scheme html { înălțime: 100%; } body { margin: 0; umplutură: 0; inaltime: 100%; latime: 100%; } #stânga, #dreapta { float: stânga; } #stânga { înălțime:100%; culoare de fundal: portocaliu; latime: 10%; } #dreapta { înălțime: 100%; poziție:rudă; latime: 90%; } #top { culoare de fundal: albastru; înălțime: 10%; } #fotografii { poziție: relativă; inaltime: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { înălțime: 50%; latime: 50%; preaplin: automat; poziție: absolută; } #foto_sup_izq, #foto_sup_der { top: 0; } #foto_sup_der, #foto_inf_der { stânga: 50%; } #foto_inf_izq, #foto_inf_der { top: 50%; } img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg 

Atasamente

  • img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg'file-meta'> 36.3 KB · Vizualizări: 405