• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

class vh minus ?

O

Orac

Mitglied
Hallo,
ich verwende Bootstrao 5.x und könnte mir jemand sagen wie ich das als css mahcen muß wenn der Container vh100 ist minus my-3 ?
Damit möchte ich einen Abstand oben und unten erreichen aber trotzdem das der könnter ohne zu Scroll nach unten komplett angezeigt wird egal ob der Inhalt zu kurz ist. Wenn der Inhalt mehr ist als die Bildschrimgröße dann sollte sich der komplette Cpntainer mit vergrößern.

HTML: 
<div class="container vh-x bg-1 my-3 rounded-4"> </div>
 
Werbung:
Ich weiß nicht so recht, was du möchtest, aber man calc() benutzen:
Code: 
.container {
height:calc(100vh - 60px);
}

Ansonsten Javascript:
Javascript: 
const cont = document.querySelector(".container");
const box = document.querySelector(".my-3");
const h = box.offsetHeight;
cont.style.height = "calc(100vh - "+h+"px)";
 
Zuletzt bearbeitet:
Hallo,
einfach einen gleichmäßigen ausenabstand oben und unten ab Tablet größe,
wobei der Container von oben nach unten gehen soll unabhängig vom inhalt
 
Werbung:
Danke wegen dem calc-
ich habe es so gelöst
CSS: 
.vh-x { height:calc(100vh - 2rem);
    /* height: 100vh !important; */
    }

HTML: 
<div class=" p-3 container vh-x bg-1 my-3 rounded-4">

passt jedenfalls.

Danke nochmal
 
Werbung:
Seit es Flex und Grid gibt, sollte diese Rechnerei mit calc eigentlich überflüssig sein:
Code: 
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html,
        body {
            height: 100vh;
        }

        body {
            display: flex;
            flex-direction: column;
            margin: 0;
        }

        main {
            margin: 2em 0;
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: auto;
            background-color: lightblue;
        }
    </style>
    <title>Layout Demo</title>
</head>

<body>
    <main>xxxxxxx</main>
</body>

</html>
 
Zuletzt bearbeitet:
Werbung:
@Sempervivum
Danke

@msi
für jemanden der nicht so gut HTML und CSS kann finde ich Bootstrap ok.
Ich für meinen teil kenn mich teilweise mit dne Bootstrap klassen besser aus als mit Padding und Co in reines CSS.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben