webentwicklung-frage-antwort-db.com.de

HTML/CSS-Seitenleiste mit voller Höhe

Ich habe viele Diskussionen und Fragen im Internet gefunden, die sich auf diese Frage beziehen. Allerdings scheint keine von ihnen mit meinem Fall übereinzustimmen.

Ich habe ein header-Element mit einer Höhe von 100px oben auf der Seite. Ich habe ein div#sidebar-Element mit einer Breite von 250px nach links geschoben und schließlich ein div#main-Element nach links geschoben.

Die Höhe von html, body und div#sidebar beträgt 100%.

Mein Ziel ist es, div#sidebar so weit wie möglich nach unten bis zum Ende der Seite zu ziehen, unabhängig von der Browsergröße oder der Inhaltsgröße. Wenn der Inhalt länger als die sichtbare Seitenhöhe ist, sollte er sich normal verhalten und über das Ende der Seite hinausschieben, so dass Bildlaufleisten eingeblendet werden.

Es scheint jedoch, dass die Seitenhöhe als 100% + 100px berechnet wurde, wodurch Bildlaufleisten eingeführt werden, obwohl es keinen Inhalt gibt, der div#sidebar nach unten drücken würde. Bisher habe ich keine Lösungen gefunden, die funktionieren, oder vielleicht habe ich sie vermisst oder eine Lösung durcheinander gebracht; Trotzdem bin ich schon seit über einer Stunde dabei und bin dabei, mir die Haare auszureißen.

Gibt es eine Nicht-JavaScript-Methode, damit dies ordnungsgemäß funktioniert, um zu verhindern, dass die header-Höhe zu 100% hinzugefügt wird?


Hier ist mein HTML/CSS - obwohl ich alle relevanten Details oben angegeben habe, sollte dies helfen.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Awesome Template!</title>
        <link href="./stylesheet.css" rel="stylesheet" />
    </head>
    <body>
        <header id="primary">
            <h1>My Awesome Template!</h1>
        </header>
        <div id="sidebar">
            <h1>Sidebar</h1>
        </div>
        <div id="main">
            <h1>Main</h1>
        </div>
    </body>
</html>

CSS:

html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

body
{
    background: #fff;
    font: 14px/1.333 sans-serif;
    color: #080000;
}

header#primary
{
    width: 100%;
    height: 100px;
    background: #313131;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131));
    background-image: -moz-linear-gradient(#4d4d4d, #313131);
    background-image: -o-linear-gradient(#4d4d4d, #313131);
    background-image: linear-gradient(#4d4d4d, #313131);
}
header#primary h1
{
    margin: 0px 0px 0px 20px;
    padding: 0px;
    line-height: 100px;
    color: #ffffff;
}

#sidebar
{
    float: left;
    width: 250px;
    background: #ccc;
    min-height: 100%;
}

#main
{
    float: left;
}
11
Steven Zezulak

Sie suchen nach der berüchtigten "Faux-Column" -Technik. Hier ist ein Tutorial .

Grundsätzlich ist dies nicht mit einer einfachen Hintergrundfarbe möglich, sondern Sie müssen ein sich wiederholendes Hintergrundbild verwenden.

4
Iterate

Ich fand, dass die in diesem Artikel beschriebene Methode eine sehr einfache Methode zur Lösung des Problems war.

Sie müssen Ihre #sidebar- und #main-divs mit einem anderen div umgeben, sodass der HTML-Code wie folgt lautet:

...
<div id="content">
    <div id="sidebar">
        <h1>Sidebar</h1>
    </div>
    <div id="main">
        <h1>Main</h1>
    </div>
</div>
...

und dann wird das folgende CSS etwas tun, was Sie wollen:

#content {
    position: relative;
    width: 100%;
}
#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
}
#main {
    position: relative;
    margin-left: 250px;
}

(Mit ein paar kleinen Änderungen fand ich heraus, dass der Rand von h1 in #main scheinbar ignoriert wurde ... aber der Rand von h1 in #sidebar war nicht der Fall!).

12
Murray Jensen

Wenn Sie sich nicht für einen niedrigeren IE interessieren, verwenden Sie display: table für ein übergeordnetes Element und display: table-cell für die Elemente. Dies sollte ihre Höhen zusammen festlegen. Verwenden Sie für die Lücke margin-top: -100 px; padding-top: 100px;

3
Madara Uchiha

Sie sind sich nicht sicher, ob Sie dies versucht haben oder ob es für Sie funktionieren wird (ich bin neu in der Codierung). Versuchen Sie jedoch, die Seitenleiste nach links zu verschieben, den Inhalt nach rechts zu verschieben, beide Text nach links auszurichten und Prozentsätze für die Breite zu verwenden.

#sidebar
    {
float: left;
width: 25%;
background: #ccc;
min-height: 100%;
text-align: left;
    }

#main
    {
float: right;
text-align: left;
width: 70%;
    }

Wenn Sie andere Einstellungen haben, müssen Sie diese Einstellungen anders angehen. Dies kann jedoch funktionieren.

1
Jeff
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

Sie können dies mit diesem Code tun. Die Höhe des Hauptinhalts aufrufen.

0