Ich habe ein Elternteil Div, die ein Hintergrundbild von Bergen hat. Ich habe ein Kind Div, die ein responsives Bild von Häusern haben. Ich möchte einem Kind-Div ein Padding-Top geben, wenn sich die vertikale Breite des Fensters ändert, so dass Häuser ihre Position am unteren Rand der Berge behalten. Ich benutze weniger css.CSS: Div-Padding nach Responsive-Bild im Hintergrund
Ich werde weitermachen und Vorwort dies mit „Ich bin auf jeden Fall nicht die besten bei CSS“ aber ich bin ziemlich sicher, dass der Effekt, den Sie könnten die mit der Verwendung von Viewport Height
Hier ist ein schneller erreicht werden wollen Ausschnitt unten. Vielleicht möchten Sie von vh zu vielleicht vmin oder vmax, abhängig ändern.
body,
html {
height: 100%;
}
.parent {
background-image: url(http://placehold.it/400x600);
height: 100%;
background-repeat: no-repeat;
}
.child {
padding-top: 10vh;
}<div class="parent">
<div class="child">
Testing
</div>
</div>Hintergrundbild haben reagiert, so ändert Bergposition, wenn ändern vertikale Breite, I Ich möchte die Häuser an derselben Position halten (wo der Berg endet). Eine Möglichkeit ist, dass ich Medienabfragen für alle 100px oder so verwenden und padding-top definieren kann, aber ich möchte eine Formel verwenden, um die Medienabfragen minimal zu halten. –
Wäre es nicht besser, wenn Sie position: absolute; bottom: 0 zu den Häusern angelegt und Berg wird position: relative haben?
Wenn durch vertikale Breite Sie Höhe bedeuten, haben Sie es mit js jQuery exaple zu tun
if ($(window).height()) < 800 {
$(childdiv).css('pading-top','60px');
}
Post Code, den Sie bisher – LGSon