Probleme beim Anpassen der Höhe der div Elemente beim Überlagern eines Gitters auf ein Bild

Question

Ich verwende Vue.js & vuetify, um eine SPA zu machen.

Ich habe eine Komponente, die ein Hintergrundbild hat, auf dem ich ein Raster überlagere. Das Bild passt sein Seitenverhältnis an, wenn ich die Breite der Seite ändere. Ich möchte das gleiche Verhalten im Raster haben.

Ich generierte das Raster mit divtable.com/generate. Es gab mir nur eine 12x12 Tabelle von Divs und einige CSS-Selektoren für sie. Ich wollte eine genaue Kontrolle darüber haben, wie ich die Formulare überlagerte, also entschied ich mich, diese Route zu gehen.

Ich habe Probleme beim Anpassen der Höhe der div-Tabellenzellen. Die Breite passt sich gut an und bleibt ausgerichtet, aber die Höhe der Zellen ist konstant, egal was passiert. Ich bin auch ein wenig von einem css noob. Ich weiß nicht, ob vuetify oder vue im Hintergrund etwas von der css macht.

Ich habe viele Dinge ausprobiert. Das Festlegen der Eigenschaft height funktioniert aus irgendeinem Grund nicht. Ich habe versucht, "scoped" auf den Stil anzuwenden, falls etwas außer Kraft gesetzt wird. Aus irgendeinem Grund wird sich die Höhe der Zelle nicht ändern, egal was passiert. Jede Hilfe wird geschätzt. j

ein wörtliches Beispiel für den Code finden Sie hier: http://divtable.com/generator/

Der einzige Unterschied ist, ich habe folgende Selektoren vor der Tabelle der divs:

img { 
    width: 100%; 
} 
.image-container { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 
.image-container .after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

Danke. Ich würde nicht fragen, ob ich nicht in Eile war, das morgen durchzukriegen. Jede Hilfe wird geschätzt.

Hinweis: Ich habe versucht, eine Mindesthöhe einzustellen. Er machte es und alle möglichen anderen Sachen, die ich fand.

Answer 1

Ich entschied mich aus Gründen der Zeit, nur ein Gitter-Overlay überhaupt nicht zu verwenden und nur die Komponenten über das Bild mit relativen Positionen anzupassen. In diesem Fall gab es keinen wirklichen Vorteil, ein Gitter-Overlay zu verwenden.

Aus technischer Sicht war ich nicht in der Lage, das genaue Problem zu finden, aber es war wahrscheinlich keine Framework-Magie, nur Zeitmangel bei der Suche nach der richtigen CSS-Selektor zu justieren.

Danke für jede Hilfe. Sehr geschätzt.

img { 
 
    width: 100%; 
 
} 
 
.image-container { 
 
    position: relative; 
 
    width: 95%; 
 
    height: 100%; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
} 
 
.image-container .after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height: 100px; 
 
} 
 
#loadControlDevices { 
 
    position: relative; 
 
    margin-top: 10.5%; 
 
    margin-left: 1.15%; 
 
}

<div class="image-container" > 
 
     <div style="height: 100%;"> 
 
     <img src="scope.ami.png" /> 
 
     </div> 
 
     <div class="after"> 
 
     <div id="loadControlDevices"> 
 
      <v-checkbox id="loadControlCB" name="loadControlCB" label="" filled></v-checkbox> 
 
     </div> 
 
     ... other divs following this ... 
 
     </div> 
 
    </div>