Moi! Haluaisin kysyä, miten voin tehdä siten, että jos minulla on yksi div-boksi
Esim:
---------------------- | | | DIV-BOKSI | | | ----------------------
Niin miten sen sisällä oleva laatikko voisi olla pituudeltaan tismalleen sama, kun pituutta ei määritellä, sillä teksti vaihtelee tekstin pituudesta (eri sivuja, eri määrä tekstiä = ns. template), ja lisätään paddinkia päälle. Miten siis voin "venyttää" laatikon kokonaan sen sisälle.
Nykyinen tilanne:
--------------------------- |-------------- | || | | || Jotain | | |-------------- | | | | | | | ---------------------------
Haluttu tilanne:
---------------------------- |------------- | || | | || Jotain | | || | | || | | |------------- | ----------------------------
En voinut merkeillä saada reunoja "päällekkäin", joten näyttää, että sisempi "Jotain"-laatikko on erikseen parin margineiden avulla leijumassa tuolla, mutta sitä en hae, vaan että viivatkin ovat päällekkäin. Kiitos jo avusta etukäteen, kysymyksiä saa esittää jos sellaisia ilmenee.
Kokeile laittaa ulommalle ”position: relative” ja sisemmälle ”min-height: 100%”.
Metabolix kirjoitti:
Kokeile laittaa ulommalle ”position: relative” ja sisemmälle ”min-height: 100%”.
Eipä toimi ei. Menee yli laatikon. Kirjaimellisesti 100% (sivun kokonaispituudesta). Ei, ei auttanut ottaa body-kohdasta height ja width 100%-kohdat pois.
Muuten, toimiiko toi min/max-width IE:llä? Ainakaan tätä edellisessä projussa ei toiminut max, joten läjähtääkö toi sitten IE:llä ihan oudoksi vänkyräksi. Kyllä, minulla on erikseen IE:n tyylitiedosto, mutta sitten kuuluu kysymys: miten sitten IE:llä?
Kyllä IE:ssä toimivat min ja max, ellet sitten jotain ikivanhaa (IE6) halua tukea.
Muista kirjoittaa HTML-koodi oikein ja aloittaa DOCTYPE-rivillä, jotta selaimet ovat standarditilassa eivätkä quirks-tilassa.
Täyte (padding) sotkee kokolaskuja, joten joissain tilanteissa täytyy koota laatikot kahdesta elementistä niin, että ulommalla on border ja sisemmällä padding. Joskus myös sopiva box-sizing auttaa, mutta nyt ei kovin hyvin, koska haluat reunaviivat täsmälleen päällekkäin etkä vierekkäin.
Minulla esimerkiksi seuraava koodi tuottaa käsittääkseni oikean tuloksen:
<!DOCTYPE html> <div style="border: 1px solid red; position: relative; padding: 0; height: 20em;"> <div style="border: 1px solid blue; margin: -1px; min-height: 100%; padding: 0;"> <div style="padding: 1em;"> Lorem ipsum </div> </div> </div>
Joo, kyllä toi sun esimerkkisi toimii, mutta ei vaan nyt ton mun koodin kanssa. Vaikka laittaisinkin nuo 100% samanlailla, ei se kuitenkaan toimi, en nyt jaksa miettiä, miksi.
No eihän se voi toimia, kun et määrittele korkeutta ulommalle elementille.
esim näin: http://jsfiddle.net/kaxEh/
*edit*
containerissa ei kyllä height: määritystä tarvitse tässä esimerkkitapauksessä, sellaisen jostain syystä sinne neämmä tungin.
Tuolla logiiikalla mikään elementti ei tarvitse korkeuden määrittelyä. Oletuskäyttäytyminen on se, että parentti kasvaa jälkeläisensä mukana. Tässä ei ole kyse siitä.
Mistäs tässä on kyse, ellei siitä että halutaan expandata children parentin korkeuteen? Ei niitä kiinteitä korkeuksia ole mikään pakko viljellä. varsinkaan jos responsiivista ui:ta halutaan vääntää tai edes jotain sinneppäin. childrenin kokoa voi sitten säädellä width:in ja height:in prosentilla, jotka on sidottu parentin kokoon (joka voi myöskin olla prosenttisidottu aina bodyyn ja html tagiin asti).
Sun esimerkkisi expandaa parentin jälkeläisensä korkeuteen eli ihan päinvastoin kuin mistä selität.
jos parentilla on kiinteä koko, on aina riski että kama ei sisälle mahdu. overflow:hiddenillä tuon ylipursuavan kilkkeen saa piiloon, mutta eipä tuokaan kovin hyvältä vaihtoehdolta vaikuta.
enivei, tässä parent kiinteällä korkeudella ja mukana elävä children: http://jsfiddle.net/8bH2s/
Metabolix antoi jo sen esimerkin. Ongelmaan ei ole mitään teknisesti kuvaillun kaltaista ratkaisua, koska html/css ei sellaista tue. Sen sijaan pitää tyytyä siihen, että asiat näyttävät halutunlaisilta.
Aihe on jo aika vanha, joten et voi enää vastata siihen.