CSS3 Div magasságának kinyújtása a cella magasságára.

Címkék
CSS3 Div magasságának kinyújtása a cella magasságára.
2022-01-27T09:35:20+01:00
2022-01-28T08:31:39+01:00
2022-10-15T21:20:32+02:00
GZolee79
Szisztok!

Sehogy nem sikerül megoldani a következő problémát.

Van egy táblázatom, aminek egyes celláiba szeretnék "DIV" -ket tenni.
A DIV-ben nem lenne semmi, csak egy színes négyzet. 
Hogyan tudnám elérni, hogy a div pont akkora legyen mindig mint a cella mérete.

Így próbáltam:
HTML:

<!DOCTYPE html> <html lang="hu"> <meta charset="UTF-8"> <title>Próba</title> <link href="main.css" rel="stylesheet" type="text/css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> <body> <header><div><span>Próba</span></div></header> <div class="main_page"> <div id="content"> <div id="contentHeader"> <table id="content_table" border="1"> <tr> <th>Száma</th><th>Tárgy</th> </tr> <tr> <td><div class="div_inside_td"></div></td> <td>Ide bármilyen szöveg kerül</td> </tr> </table> </div> </div> </body> </html>
CSS:

@charset "utf-8"; /* CSS Document */ html { margin: 0; height: 100%; } body { margin: 0; padding: 0; /*min-width: 600px;*/ height: 100%; } #content_table tr { line-height: 50px; } .div_inside_td { display: block; background-color: aqua; height: 100%; width: 100%; }
Ebben az esetben miért nem működnek a százalékos méretezések?

Előre is köszönöm a segítséget!

Üdv:
Z.
Mutasd a teljes hozzászólást!
div_inside_td { display: list-item; background-color: aqua; height: 100%; width: 100%; }
Mutasd a teljes hozzászólást!

  • #content_table { height: 1px; }
    Mutasd a teljes hozzászólást!
  • Szia

    Végre működik!

    Köszönöm!

    Z.
    Mutasd a teljes hozzászólást!
  • Szia!

    Köszi!
    Ha csak ezt írom be nem jó sajnos, de Bzzs válasza segített.

    Üdv:
    Z.
    Mutasd a teljes hozzászólást!
  • Egyébként a div-nek "display:inline-block"-ot kellene adni, de az csak akkor működik, ha a parent tagnak (a te esetedben) a td-nek van szélessége és magassága.

    Én gy csináltam volna.

    <style> .table{ display:table; border-spacing:10px; } .tr { display:table-row; } .td { display: table-cell; line-height:50px; border:1px solid #ccc; padding:10px; } .td.color{ background-color: aqua; } </style> <div class="table"> <div class="tr"> <div class="td">Száma</div> <div class="td">Tárgy</div> </div> <div class="tr"> <div class="td color"></div> <div class="td">Ide bármilyen szöveg kerül</div> </div> </div>
    Mutasd a teljes hozzászólást!
  • Kipróbáltam, ez is működik.

    Igazából az eredeti elképzelésem az lett volna, hogy táblázat 1-1 cellájában két divet teszek egymás fölé.
    Azt hittem ha egyet bele tudok tenni és széthúzom 100%-ra akkor a másikat már könnyedén fölé teszem. Sajnos tévedtem!
    Nem sikerül.
    vagyis ha beleírok egy ilyet:

    transform: translateY(-100%);

    Akkor az első div főlé viszi, viszont dupla olyan magasra nyújtja azt a sort, és sehogy sem tudom visszaméretezni :)

    Viszont látom, hogy te divekből raktál össze egy táblázatot. 
    Ez azt jelenti, hogy ez a módszer a <table>-el nem működik?
    Jó lenne ha az eredeti elképzelés szerint meg tudnám csinálni :)
    Mutasd a teljes hozzászólást!
  • Azt szeretnéd, hogy takarják egymást?
    Mutasd a teljes hozzászólást!
  • Igen!
    Ez lenne a terv :)

    Pl így (a segítséged alapján):

    HTML:

    <!DOCTYPE html> <html lang="hu"> <meta charset="UTF-8"> <title>Próba</title> <link href="main.css" rel="stylesheet" type="text/css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> <body> <header><div><span>Próba</span></div></header> <div class="main_page"> <div id="content"> <div id="contentHeader"> <table id="content_table" border="1"> <tr> <th>Száma</th><th>Tárgy</th> </tr> <tr> <td><div class="div_inside_td"></div><div class="cover"></div></td> <td>Ide bármilyen szöveg kerülhet</td> </tr> </table> </div> </div> </body> </html>
    CSS:

    @charset "utf-8"; /* CSS Document */ html { margin: 0; height: 100%; } body { margin: 0; padding: 0; /*min-width: 600px;*/ height: 100%; } #content_table tr { line-height: 50px; box-sizing: content-box; } .div_inside_td { display: list-item; background-color: aqua; height: 100%; width: 100%; z-index: 1; } .cover { display: list-item; background-color: brown; height: 100%; width: 100%; z-index: 2; opacity: 0.8; transform: translateY(-100%); }
    Itt látni mit szeretnék, de úgy hogy a cella magasságát ne húzza szét.
    Mutasd a teljes hozzászólást!
  • használd ki
    .div_inside_td:before .div_inside_td:after
    Mutasd a teljes hozzászólást!
  • Bocs, de nem tudom, hogyan tudnám ezt használni a megoldáshoz.

    Mármint tudom kb. mire jó, csak ebben az esetben nem tudom hogy :)

    Valamit tudnál még súgni ?
    Egyébként azt is próbáltam, hogy ezt a 2 diver beleraktam egy harm3dik divbe, de úgysem volt jó...
    Mutasd a teljes hozzászólást!
  • Törekedj arra, hogy minél kevesebb html-tagot használj.

    pl:

    <td>
    <div><img src=""></div>
    <div>Rizsa rizsa</div>
    </td>

    És ezt kevesebb html-el

    <style>
    .tag:before{
    content:'';
    background-image:url(........);
    display:block;
    }
    .tag:after{
    content:'Rizsa rizsa';
    display:block;
    }
    </style>
    <td class="tag"></td>
    Mutasd a teljes hozzászólást!
  • Köszi!

    Azt hiszem így már kezdem érteni :)
    Egyébként közben sikerült megoldani, úgy hogy a TD-én belül csak egy DIV van És ezen belül van még egy Gombként működő div és egy DIV ami eltakarja.

    Mégegyszer nem tudom elfogadni a megoldásodat, de mindenképpen hasznos! :)

    Köszi még egyszer!
    Mutasd a teljes hozzászólást!
Címkék
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd