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

Seite in Haupt- Seiten- und Fußbereich teilen (mit Bootstrap)

CptK

CptK

Neues Mitglied
Hallo, ich würde meine Seite gerne in drei bereiche aufteielen: einen Hauptbereich, einen Seitenbereich und einen Fußbereich. Das Layout soll am Ende dem ähneln, wie man es aus Editoren wie VS Code oder Eclipse kennt, also Explorer, Hauptfenster und Konsolenbereich. Zudem wäre es schön, wenn man diese Abschnitte durch ziehen verändern könnte (wobei das erst mal optional ist). Leider habe ich sehr wenig Erfahrung mit sowas und dementsprechend sieht auch mein Ansatz (mit Bootstrap, was ich auch gerne verwenden würde) aus:
HTML: 
<div class="row h-80">
    <div class="col-sm-9 h-100">
        <app-main></app-main>
    </div>
    <div class="col-sm-3 h-100">
        <app-sidebar></app-sidebar>
    </div>
</div>
<div class="row h-20">
    <app-footer></app-footer>
</div>
LG
 
Werbung:
Sempervivum schrieb:
Ich bin ja kein Freund von Bootstrap, siehe hier:

Mit Gridlayout eine Struktur mit selbst erklärenden semantischen Tags statt eines kryptischen Gewirrs von Containern und Klassen:
Code: 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Grid Layout</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html {
            height: 100%;
        }
        body {
            min-height: 100%;
            margin: 0;
            display: grid;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 5em;
        }

        footer {
            grid-column: 1 / 3;
        }

        main {
            background-color: lightblue;
        }

        aside {
            background-color: blueviolet;
        }

        footer {
            background-color: lightseagreen;
        }
    </style>
</head>

<body>
    <main>

    </main>
    <aside>

    </aside>
    <footer>

    </footer>
</body>

</html>
Zum Vergrößern anklicken....
Also entweder ich habe da was total falsch gemacht oder das geht so nicht:
1631134193956.png
 
Also ich habe mir das Grid mal angeschaut (allerdings nicht mit so selbstsprechenden Namen) und das Ergebnis ist fast zufriedenstellend:
HTML: 
<div class="grid-container">
    <div class="grid-item grid-item-header">
        Header
    </div>
    <div class="grid-item grid-item-content">
        <app-chart-canvas></app-chart-canvas>
    </div>
    <div class="grid-item grid-item-sidebar">
        Sidebar
    </div>
    <div class="grid-item grid-item-footer">
        Footer
    </div>
</div>

CSS: 
.grid-container {
    display: grid;
    grid-gap: 0;
    grid-auto-columns: 70% 30%;
    grid-template-rows: auto;
    height: 100vh;
}

.grid-item {
    padding: 10px;
}

.grid-item-header {
    padding: 0;
    grid-column: 1 / 3;
    border-bottom: 1px solid darkgray;
}

.grid-item-content {
    grid-column: 1 / 2;
    grid-row: 2 / 5;
}

.grid-item-sidebar {
    border-left: 1px solid darkgray;
    grid-column: 2 / 3;
    grid-row: 2 / 7;
}

.grid-item-footer {
    border-top: 1px solid darkgray;
    grid-column: 1 / 2;
    grid-row: 5 / 7;
}
Jetzt hätte ich gerne eine Scrollbar in meinen Komponenten, falls der Content zu lang ist. Wenn also beispielsweise der Content im Footer nicht in den zugewisenen Bereich 5 / 7 passt, soll dieser nicht vergrößert werden, sondern man soll im Footer scrollen können. Das gleiche gilt für die Sidebar. Wie realisiere ich sowas?
 
Werbung:
www.w3schools.com

CSS Overflow

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben