TEHDÄÄNKÖ DIV-ELEMENTTI TÄYTTÄMÄÄN JÄLJELLÄ OLEVAN PYSTYSUORAN TILAN? (CSS)

floyde

Alkuperäinen juliste

: 7. huhtikuuta 2005

: Monterrey Meksiko

27. maaliskuuta 2006

Onko se mahdollista?
Minulla on kaksi diviä. Toisella on kiinteä korkeus ja haluan toisen täyttävän ikkunassa jäljellä olevan pystysuoran tilan. Jos asetan jälkimmäisen div:n korkeudeksi 100%, se tekee siitä saman korkeuden kuin ikkuna, mutta haluan sen olevan ikkunan korkeus miinus ensimmäisen div:n korkeus.

Tämä on käyttämäni koodi:
Koodi: |_+_|
Lisäsin myös kuvia, jotka osoittavat, mitä haluan tehdä ja mitä olen voinut tehdä tähän mennessä. Kiitos etukäteen

Liitteet

xa.gif'file-meta'> 2,6 kt · Katselukerrat: 10 076
xb.gif'file-meta'> 3 kt · Katselukerrat: 9 950

NoNameBrand

: 17. marraskuuta 2005

: Halifax, Kanada

27. maaliskuuta 2006

Miksei 1. pesiisi toisen sisään?

Muuten en voi ajatella tapaa, jolla saat mitä haluat.

stevep

: 13. lokakuuta 2004

: Iso-Britannia

27. maaliskuuta 2006

Luulen, että voi olla, että et kerro toiselle kerrokselle, mistä sen on aloitettava, joten se oletetaan, että se alkaa ylhäältä, jolloin se menee päällekkäin ensimmäisen kerroksen kanssa.
Yrittää:

Nimetön dokumentti

kohtaan

ps Huijasin tekemällä sen DW:ssä, lisäämällä sisältöä toiseen kerrokseen ja sitten sekoittamalla koodin kanssa - DW tykkää, että asioissa on jotain pehmustetta reunojen ympärillä ja vaikka voit määrittää dialogeissa, että haluat kerroksen Aloita 0px:stä yläkulmasta, sinun on kerrottava se kahdesti koodinäkymän avulla. Minun oli joka tapauksessa.

floyde

Alkuperäinen juliste

: 7. huhtikuuta 2005

: Monterrey Meksiko

27. maaliskuuta 2006

NoNameBrand sanoi: Miksei 1. pesittäisi toisen sisään?

Muuten en voi ajatella tapaa, jolla saat mitä haluat.

Kiitos, se toimii visuaalisesti, mutta toinen div tulee olemaan tämän asettelun kontti, joten tarvitsen silti sen oikeat mitat, jotta sen sisältö voi periä ne.

Joten ehkä se ei yksinkertaisesti ole mahdollista? Ehkä minun on käytettävä vähän javascriptiä, jotta se toimisi?

stevep sanoi: Kokeile:

Kiitos, mutta en saanut sitä toimimaan. Mitä selainta käytit?

floyde

Alkuperäinen juliste

: 7. huhtikuuta 2005

: Monterrey Meksiko

27. maaliskuuta 2006

Asioiden suuri suunnitelma

Ok, tässä on kuva lopullisesta tavoitteestani. Toistaiseksi olen tehnyt sen asteittain, joten ehkä ongelma on alkuperäinen lähestymistapani. Joten miten suhtautuisitte tähän (tarvitsen vain ideoita)? Käyttäisitkö puhdasta css:ää vai antaisitko periksi taulukoille tai kehyksille?

Liitteet

grand_scheme.gif'file-meta'> 40,2 kt · Katselukerrat: 450

stevep

: 13. lokakuuta 2004

: Iso-Britannia

27. maaliskuuta 2006

Käytin Safaria. Kopioi ja liitä koodipala tekstitiedostoon – varmista, että sen pääte on .html, kun tallennat sen. Vedä sitten uusi tiedosto avoimeen selainikkunaan. Testasin sitä juuri Firefoxilla ja se on ok - ainakin luulen sen olevan mitä haluat.
Asia, jolla sinun täytyy leikkiä, on tämä:
#Layer1 {
sijainti: absoluuttinen;
vasen: 0px;
yläosa: 0px;
leveys: 100 %;
korkeus: 180px;
z-indeksi: 1;
taustaväri: #99CCFF;
}
Karhenna sivusi paperille, jotta saat oikeat paikat, jolloin saat kunkin kerroksen LH-yläkulman sijainnin. Kerroksen 1 korkeus määrää kerroksen 2 aloituspaikan - tässä tapauksessa kerroksen 2 tulee olla ayläosa: 180px;koodiriviä.
Jos haluat 3 kerrosta sellaisena kuin näytät viimeisessä viestissäsi, vasemmanpuoleisin kerros on:
#Layer1 {
sijainti: absoluuttinen;
vasen: 0px;
yläosa: 0px;
leveys: 200px;
korkeus: 100%;
z-indeksi: 1;
taustaväri: #336699;
}
ja ylempi RH-kerros on:
#Layer1 {
sijainti: absoluuttinen;
vasen: 200px;
yläosa: 0px;
leveys: 100 %;
korkeus: 180px;
z-indeksi: 2;
taustaväri: #33CCFF;
}
ja kolmannen kerroksen, joka täyttää ikkunan loppuosan (mikä tahansa sen kokoa muutetaan), pitäisi olla jotain tällaista:
#Layer1 {
sijainti: absoluuttinen;
vasen: 200px;
yläosa: 180px;
leveys: 100 %;
korkeus: 100%;
z-indeksi: 3;
taustaväri: #99CCFF;
}
Jos käytät Dreamweaveria, jokaiseen kerrokseen kannattaa laittaa tyhjää sisältöä siltä varalta, että kerros kutistuu tyhjäksi sivunäkymässä, mistä johtuen 'a,b,c etc' yllä olevassa alkuperäisessä html:ssä.

ps En ole asiantuntija, voin olla väärässä, mutta toivottavasti se auttaa. Voin sanoa, että ensimmäinen koodini näyttää toimivan. Itse en peittäisi kerroksia, jos voisin auttaa hieman, mutta se on vain minä - teen vain yksinkertaisia. N

NoNameBrand

: 17. marraskuuta 2005

: Halifax, Kanada

27. maaliskuuta 2006

Mitä tämä 'kerros' on? onko tuo Dreamweaver-tyyppinen 'break stuff' todella hyvä?

Tässä mitä tekisin:
Koodi:

foo   sinä uskot!
         
 14. kesäkuuta 2003
 
        
  
         
 MD / VA / DC
 
   27. maaliskuuta 2006
 
   Dekonsepti...   
  
Tutustu FlashObjectiin ja latauksessa on koodi, jolla voi tehdä div:n koko näytön puolelle.. ehkä se voidaan räätälöidä haluamallasi tavalla. 
  
  http://blog.deconcept.com/flashobject/     floyde
    Alkuperäinen juliste          
 7. huhtikuuta 2005
 
        
  
         
 Monterrey Meksiko
 
   28. huhtikuuta 2006
 
Kiitos kaikille avusta, mutta tajusin juuri, että haluamaani tarkkaa asettelua on mahdoton saavuttaa kiinteiden leveuksien/korkeuksien ja prosenttiosuuksien yhdistelmällä. Kirjoitin sen uudelleen käyttämällä vain prosentteja ja nyt se toimii. Jos olet kiinnostunut merkinnöistä, kerro minulle, niin laitan sen.   stevep
         
 13. lokakuuta 2004
 
        
  
         
 Iso-Britannia
 
   28. huhtikuuta 2006
 
   floyde sanoi: Jos olet kiinnostunut merkinnöistä, kerro minulle, niin julkaisen sen.
Haluaisin katsoa, jos sinulla on aikaa kirjoittaa uudelleen. 
  NoNameBrand sanoi: Mitä tämä 'kerros' on? onko tuo Dreamweaver-tyyppinen 'break stuff' todella hyvä?
No, en tiedä 'breaking stuff'ista', mutta luulisit, että en ole CSS-poika - kerrokset ovat DW:n antama kätevä nimi asioille, joita minun mielestäni pitäisi kutsua 'CSS-sijoitetuiksi elementeiksi' - ja Luulen, että he kutsuvat niitä niin, jotta minun kaltaiset ihmiset DTP-/Photoshop-taustasta tuntevat olonsa mukavammaksi. Kun katsot viestiisi lisäämääsi koodia NoNameBrand, se on paljon tyylikkäämpi kuin omani – minun on yritettävä todella saada pääni div-tunnisteen ympärille. Kiitos ap:sta ja vastauksista.  N  NoNameBrand
         
 17. marraskuuta 2005
 
        
  
         
 Halifax, Kanada
 
   28. huhtikuuta 2006
 
   stevep sanoi: No, en tiedä 'murtojutuista', mutta luulisit, että luulit, etten ole CSS-pomo - kerrokset ovat DW:n kätevä nimitys asioille, joita minun mielestäni pitäisi kutsua 'CSS-sijoitetuiksi elementeiksi'. '
  
Heillä oli myös pinottavat z-indeksit, jotka asettavat asiat sivulle edestä taakse. Olen nähnyt ennenkin DW-kerroksia, jotka rikkoivat sivuston täysin, mutta muuten en ole paljoa nähnyt niille (se riitti, todella). 
  
  Minun täytyy yrittää saada pääni div-tunnisteen ympärille.
  
A on vain mielivaltainen lohko - se ei tarkoita mitään semanttisesti, tapa atekee (tekstin kappale). Aon sama idea, mutta sisäisille asioille (kuten a tunniste, mutta jälleen semanttinen). 
  
Helpoin tapa oppia nämä asiat on lopettaa Dreamweaverin käyttö. Suunnittelen sivustoni Photoshopissa ja tallennan sitten haluamasi graafiset elementit sekä kirjoitan muistiin värikoodit ja karkeat pikselimitat kohdistusta varten, minkä jälkeen koodaan sivuston TextWranglerissa tai VIM:ssä.   
floyde
    Alkuperäinen juliste          
 7. huhtikuuta 2005
 
        
  
         
 Monterrey Meksiko
 
   28. huhtikuuta 2006
 
   stevep sanoi: Haluaisin katsoa, jos sinulla on aikaa julkaista uudelleen.
Tässä se on, siinä on vähän espanjaa, toivottavasti se ei ole liian sekava: 
  
Koodi:Grand Scheme html { korkeus: 100%; } body { margin: 0; pehmuste: 0; korkeus: 100%; leveys: 100 %; } #vasen, #oikea { float: left; } #vasen { korkeus:100%; taustaväri: oranssi; leveys: 10 %; } #oikea { korkeus: 100%; sijainti:suhteellinen; leveys: 90 %; } #top { taustaväri: sininen; korkeus: 10%; } #fotos { position: suhteellinen; korkeus: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der { korkeus: 50%; leveys: 50 %; ylivuoto: auto; sijainti: absoluuttinen; } #foto_sup_izq, #foto_sup_der { alkuun: 0; } #foto_sup_der, #foto_inf_der { vasen: 50%; } #foto_inf_izq, #foto_inf_der { alkuun: 50%; }  Liitteet
        img/forums/80/making-div-element-fill-remaining-vertical-space-4.jpg'file-meta'> 36,3 kt · Katselukerrat: 405

Foorumit

Tehdäänkö div-elementti täyttämään jäljellä olevan pystysuoran tilan? (css)

floyde

Liitteet

NoNameBrand

stevep

floyde

floyde

Liitteet

stevep

NoNameBrand

sinä uskot!

floyde

stevep

NoNameBrand

floyde

Liitteet

iPad Pro -kotelot, jotka sopivat vuoden 2021 iPad pro 12.9:ään taikanäppäimistöllä?

Väitetyt Apple Watch Series 7 CAD -mallit paljastavat uuden muotoilun litteillä reunoilla ja suuremmalla näytöllä

Suosittu Viestiä

Suosittu Viestiä

Luettelo iOS 10 -yhteensopivista iPhone-, iPad- ja iPod Touch -malleista [Päivitetty]

Käytännössä NVIDIAn GeForce Now -suoratoistopalvelulla

iPhone 14 Pro- ja Pro Max -tilaukset Applelta eivät enää viivästy

iPhone X Voinko korjata näytön naarmut AppleCarella?

Oprah Winfrey on ensimmäinen vieraileva toimittaja Apple Newsille

Uusi iPad Pro julkaistaan maaliskuussa. 12,9 tuuman malli voisi olla hieman paksumpi mini-LED-näytölle