Seitenleistenhöhe mit CSS 100% erzwingen (mit einem klebrigen unteren Bild)?

76

Ich habe stundenlang meinen Kopf gegen die Wand geschlagen, um dieses Problem herauszufinden und zu denken, dass es etwas Kleines sein muss, das mir fehlt. Ich habe online gesucht, aber nichts, was ich gefunden habe, scheint zu funktionieren. Der HTML-Code lautet:

<body>
  <div id="header">
    <div id="bannerleft">
    </div>

    <div id="bannerright">
      <div id="WebLinks">
        <span>Web Links:</span>
        <ul>
          <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
          <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
          <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="Sidebar">
    <div id="SidebarBottom">
    </div>
  </div>
  <div id="NavigationContainer">
    <ul id="Navigation">
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
    </ul>
  </div>
  <div id="Main">
    <!-- content -->
  </div>
</body>

Mein vollständiges CSS lautet:

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Calibri, Sans-Serif;
  height: 100%;
}

#header {
  width: 100%;
  z-index: 1;
  height: 340px;
  background-image: url("../../Content/images/bannercenter.gif");
  background-repeat: repeat-x;
}

#header #bannerleft {
  float: left;
  background-image: url("../../Content/images/bannerleft.gif");
  background-repeat: no-repeat;
  height: 340px;
  width: 439px;
  z-index: 2;
}

#bannerright {
  float: right;
  background-image: url("../../Content/images/bannerright.gif");
  background-repeat: no-repeat;
  width: 382px;
  height: 340px;
  background-color: White;
  z-index: 2;
}

#Sidebar {
  width: 180px;
  background: url("../../Content/images/Sidebar.png") repeat-y;
  z-index: 2;
  height: 100%;
  position: absolute;
}

#SidebarBottom {
  margin-left: 33px;
  height: 100%;
  background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}

#NavigationContainer {
  position: absolute;
  top: 350px;
  width: 100%;
  background-color: #bbc4c3;
  height: 29px;
  z-index: 1;
  left: 0px;
}

#Navigation {
  margin-left: 190px;
  font-family: Calibri, Sans-Serif;
}

#Navigation li {
  float: left;
  list-style: none;
  padding-right: 3%;
  padding-top: 6px;
  font-size: 100%;
}

#Navigation a:link, a:active, a:visited {
  color: #012235;
  text-decoration: none;
  font-weight: 500;
}

#Navigation a:hover {
  color: White;
}

#WebLinks {
  float: right;
  color: #00324b;
  margin-top: 50px;
  width: 375px;
}

#WebLinks span {
  float: left;
  margin-right: 7px;
  margin-left: 21px;
  font-size: 10pt;
  margin-top: 8px;
  font-family: Helvetica;
}

#WebLinks ul li {
  float: left;
  padding-right: 7px;
  list-style: none;
}

#WebLinks ul li a {
  text-decoration: none;
  font-size: 8pt;
  color: #00324b;
  font-weight: normal;
}

#WebLinks ul li a img {
  border-style: none;
}

#WebLinks ul li a:hover {
  color: #bcc5c4;
}

Ich möchte, dass sich die Seitenleiste mit dem Inhalt meiner Seite in der Höhe erstreckt und das untere Bild der Seitenleiste immer am unteren Rand der Seitenleiste bleibt.

css  sidebar  sticky 
— Jon
quelle
Können Sie bitte auch Ihr Markup zeigen?
— Björn
Zweitens wäre ein Aufschlag eine Hilfe. Und würde es uns ermöglichen, spezifische CSS oder Vorschläge anzubieten.
— David sagt, Monica am
— Prashobh

Antworten:

27

UPDATE: Da diese Antwort immer noch Stimmen nach oben und unten bekommt und zum Zeitpunkt des Schreibens acht Jahre alt ist: Es gibt wahrscheinlich bessere Techniken da draußen. Die ursprüngliche Antwort folgt unten.

Sie suchen eindeutig nach der Faux-Säulen- Technik :-)

Anhand der Berechnung der height-Eigenschaft können Sie keine height: 100%Werte für die automatische Höhe festlegen .

— Arve Systad
quelle
Die Verwendung der Faux-Column-Technik war die beste, die ich bekommen konnte. Die Probleme, auf die ich stieß, waren, dass ich die Seitenleiste nicht über der Navigationsleiste überlappen konnte und nicht herausfinden konnte, wie das Bild "Seitenleiste unten" immer unten in der Seitenleiste platziert werden sollte.
— Jon
Wenn Sie einen Hauptcontainer haben, in dem Sie den Hintergrund für die gesamte Seite haben, können Sie das Bild unten in der Seitenleiste wie folgt verwenden : background: url(blabla) no-repeat bottom;. Das Überlappen der Seitenleiste über der Navigationsleiste kann auch durch "Emulieren" der Seitenleiste im Hintergrund der Navigationsleiste behoben werden. Wenn dies für Sie keinen Sinn ergibt, würden Sie eine Skizze dessen anbringen, was Sie erreichen möchten? :)
— Arve Systad
Fügen Sie das untere Bild der Seitenleiste in die Fußzeile der Site ein, verwenden Sie jedoch die relative oder absolute Position oder den neagativen oberen Rand, um es anzuheben, sodass es oben in der Seitenleiste angezeigt wird.
— Wheresrhys
4
Antworten können teuer, erschwinglich oder billig sein und diese Antwort ist billig.
— John
3
Sie können auch alt und ihrer Zeit angemessen sein.
— Arve Systad
95

Das hat bei mir funktioniert

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}
— montrealmike
quelle
6
Das ist großartig, irgendwelche Nachteile?
— Kinet
Perfekt auch für mich! Vielen Dank!
— Deekor
12
Ich habe einen Nachteil gefunden. Wenn Sie versuchen, mit .container eine Verknüpfung zu einem bestimmten Speicherort innerhalb von .container <a href="#location">herzustellen, wird ein Bildlauf zu diesem Speicherort ausgeführt, wobei alles darüber verborgen bleibt. Siehe dies: jsfiddle.net/PTvcS - Sie können den Überlauf auf automatisch ändern, um eine bessere Ansicht zu erhalten.
— Norbert
2
Ich habe das Gefühl, den Heiligen Gral gefunden zu haben. Dieser Trick ist fantastisch, ich hatte damals so viele Probleme mit Seitenleisten.
— Nakajuice
1
Für den Fall, dass jemand wie ich blind ist: Vergiss den overflow: hiddenTeil nicht, sonst passieren schlimme Dinge.
— Doodad
28

Bis die Flexbox von CSS mehr zum Mainstream wird, können Sie die Seitenleiste immer absolut positionieren, indem Sie sie null Pixel von oben und unten entfernt halten und dann einen Rand auf Ihrem Hauptcontainer festlegen, um dies zu kompensieren.

JSFiddle

http://jsfiddle.net/QDCGv/

HTML

<section class="sidebar">I'm a sidebar.</section>

<section class="main">I'm the main section.</section>

CSS

section.sidebar {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: green;
}

section.main { margin-left: 250px; }

Hinweis : Dies ist eine sehr einfache Methode, aber Sie werden feststellen, dass bottomdies nicht "Ende der Seite", sondern "Ende des Fensters" bedeutet. Die Seitenleiste wird wahrscheinlich sofort beendet, wenn Ihr Hauptinhalt nach unten scrollt.

— Adam Grant
quelle
Ich bin froh, dass das für Sie funktioniert hat, siehe meine Notiz über die Mängel.
— Adam Grant
Funktioniert auch bei mir. Vielen Dank! Ich denke, das ist der beste Weg.
— Fuhrmann
Wenn Sie jedoch viel Inhalt haben, füllt die Seitenleiste beim Scrollen nach unten nicht mehr die volle Höhe.
— TheYaXxE
Richtig, und das habe ich am Ende meiner Antwort notiert.
— Adam Grant
1
@wranvaud Es gibt dieses: stackoverflow.com/a/32639892/393243
— Adam Grant
12

Ich würde CSS-Tabellen verwenden , um eine Seitenleistenhöhe von 100% zu erreichen.

Die Grundidee besteht darin, die Seitenleiste und die Hauptdivs in einen Container zu verpacken.

Geben Sie dem Behälter a display:table

Und geben Sie den 2 untergeordneten Divs (Seitenleiste und Haupt) a display: table-cell

Wie so ..

#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}

Schauen Sie sich diese LIVE-DEMO an, in der ich Ihr anfängliches Markup mit der obigen Technik geändert habe (ich habe Hintergrundfarben für die verschiedenen Divs verwendet, damit Sie sehen können, welche welche sind).

— Danield
quelle
1
Wow, dieses tolle Tischlayout ohne Tische!
— Dom
1
Das ist großartig, danke. Viele der anderen oben schienen für kleine Inhalte zu arbeiten und fielen dann auseinander. Dieser nicht, danke.
— Michael Kennedy
9

Flexbox ( http://caniuse.com/#feat=flexbox )

Wickeln Sie zuerst die gewünschten Spalten in ein Div oder einen Abschnitt ein, z.

<div class="content">
    <div class="main"></div>
    <div class="sidebar"></div>
</div>

Fügen Sie dann das folgende CSS hinzu:

.content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
— 9ete
quelle
2
Sieht so aus, als wäre dies die beste Antwort an diesen Tagen.
— MarkSkayff
1
Vielleicht möchten Sie auch hinzufügen, flex-flow:wrapwenn Ihre Seitenelemente nicht mehr verpackt werden
— wranvaud
5

Kann ich nach der Antwort von @montrealmike einfach meine Anpassung hinzufügen?

Ich tat dies:

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
}

Ich habe das "101%" -Ding gemacht, um der (extrem seltenen) Möglichkeit Rechnung zu tragen, dass jemand die Site auf einem riesigen Bildschirm mit einer Höhe von mehr als 5000px betrachtet!

Tolle Antwort, montrealmike. Es hat perfekt für mich funktioniert.

— Lloyd Jones
quelle
4

Ich bin bei verschiedenen Projekten mehrmals auf dieses Problem gestoßen, habe aber eine Lösung gefunden, die für mich funktioniert. Sie müssen vier div-Tags verwenden - eines, das die Seitenleiste, den Hauptinhalt und eine Fußzeile enthält.

Gestalten Sie zunächst die Elemente in Ihrem Stylesheet:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

Sie können die verschiedenen Elemente nach Belieben bearbeiten. Stellen Sie jedoch sicher, dass Sie die Fußzeileneigenschaft "clear: both" nicht ändern. Dies ist sehr wichtig.

Richten Sie dann einfach Ihre Webseite folgendermaßen ein:

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

Ich habe einen ausführlicheren Blog-Beitrag darüber unter http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container geschrieben . Bitte lassen Sie mich wissen, wenn Sie Fragen haben. Hoffe das hilft!

— TheLibzter
quelle
1
Drei Hinweise: 1. Sie können die ID 'footer' jetzt nicht in HTML 5 oder 4.01 Transitional verwenden. Sie müssen es "Spaltenfuß" oder etwas anderes nennen, damit es angezeigt und gelöscht wird. 2. Wie der Blog-Beitrag deutlich macht, wird die Seitenleiste dadurch nicht wirklich erweitert, sondern nur ein Hintergrund dahinter eingefügt, der gleich aussieht. Wenn Ihre Seitenleiste also farbig ist, müssen Sie ein Div dieser Farbe eingeben. 3. Die Pixelbreiten vermasseln alles für mich, aber Breite: 20% und Breite: 80% funktionieren, wenn Sie Box-Sizing: Border-Box aktiviert haben.
— Noumenon
1

Ich hatte das gleiche Problem wie Jon. TheLibzter hat mich auf den richtigen Weg gebracht, aber das Bild, das unten in der Seitenleiste bleiben muss, wurde nicht aufgenommen. Also habe ich einige Anpassungen vorgenommen ...

Wichtig:

  • Positionierung des Divs, das die Seitenleiste und den Inhalt enthält (#bodyLayout). Dies sollte relativ sein.
  • Positionierung des Divs, der am unteren Rand der Seitenleiste bleiben muss (#sidebarBottomDiv). Dies sollte absolut sein.
  • Die Breite des Inhalts + die Breite der Seitenleiste muss der Breite der Seite entsprechen (#container)

Hier ist das CSS:

    #container
    {
        margin: auto;
        width: 940px;
    }
    #bodyLayout
    {
        position: relative;
        width: 100%;
        padding: 0;
    }
    #header
    {
        height: 95px;
        background-color: blue;
        color: white;
    }
    #sidebar
    {
        background-color: yellow;
    }
    #sidebarTopDiv
    {
        float: left;
        width: 245px;
        color: black;
    }
    #sidebarBottomDiv
    {
        position: absolute;
        float: left;
        bottom: 0;
        width: 245px;
        height: 100px;
        background-color: green;
        color: white;
    }
    #content
    {
        float: right;
        min-height: 250px;
        width: 695px;
        background-color: White;
    }
    #footer
    {
        width: 940px;
        height: 75px;
        background-color: red;
        color: white;
    }
    .clear
    {
        clear: both;
    }

Und hier ist das HTML:

<div id="container">
    <div id="header">
        This is your header!
    </div>
    <div id="bodyLayout">
        <div id="sidebar">
            <div id="sidebarTopDiv">
                This is your sidebar!                   
            </div>
            <div id="content">                  
            This is your content!<br />
            The minimum height of the content is set to 250px so the div at the bottom of
            the sidebar will not overlap the top part of the sidebar.
            </div>
            <div id="sidebarBottomDiv">
                This is the div that will stay at the bottom of your footer!
            </div>
            <div class="clear" />
        </div>
    </div>
</div>
<div id="footer">
    This is your footer!
</div>
— Krizzz
quelle
1

Mir ist klar, dass dies ein alter Beitrag ist, aber ich habe versucht, etwas für meine Website herauszufinden, um eine Seitenleiste zu haben. Würde das funktionieren?

#sidebar-background
{
    position:fixed;
    width:250px;
    top:0;
    bottom:0;
    background-color:orange;
}

#content-background
{
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    left:250px;
    background-color:pink;
}

#sidebar
{
    float:left;
    width:250px;
}

#content
{
    float:left;
    width:600px;
}

<div id="sidebar-background"></div>
<div id="content-background"></div>

<div id="sidebar">Sidebar stuff here</div>
<div id="content">Stuff in here</div>
— ChrisHigs
quelle
0

Ich denke, Ihre Lösung wäre, Ihren Inhaltscontainer und Ihre Seitenleiste in ein übergeordnetes Element zu packen, das div enthält. Bewegen Sie Ihre Seitenleiste nach links und geben Sie ihr das Hintergrundbild. Erstellen Sie einen breiten Rand, der mindestens der Breite Ihrer Seitenleiste für Ihren Inhaltscontainer entspricht. Fügen Sie das Löschen eines Float-Hacks hinzu , damit alles funktioniert.

— Björn
quelle
0

Verwenden Sie den Körperhintergrund, wenn Sie eine Seitenleiste mit fester Breite verwenden. Geben Sie das Bild mit der gleichen Breite wie Ihre Seitenleiste an. Setzen Sie auch Hintergrund-Wiederholung: Wiederholung-y in Ihre CSS-Codes.

— Ajit Bhandari
quelle
0

Position absolut, oben: 0 und unten: 0 für die Seitenleiste und Position relativ für den Wrapper (oder Container), der alle Elemente enthält, und fertig!

— Vincent V.
quelle
0

Versuche dies. Es zwingt die Navigationsleiste, mit dem Hinzufügen von Inhalten zu wachsen, und hält den Hauptbereich zentriert.

   <html>
        <head>
            <style>
                    section.sidebar {
          width: 250px;
          min-height:100vh;
          position: sticky;
          top: 0;
          bottom: 0;
          background-color: green;
        }

        section.main { position:sticky; top:0;bottom:0;background-color: red; margin-left: 250px;min-height:100vh; }
            </style>
            <script lang="javascript">
            var i = 0;
            function AddOne()
            {
                for(i = 0;i<20;i++)
                {
                var node = document.createElement("LI");
                var textnode = document.createTextNode(' Water ' + i.toString());

                node.appendChild(textnode);
                document.getElementById("list").appendChild(node);
                }


            }
            </script>
        </head>
        <body>
                <section class="sidebar">
                    <button id="add" onclick="AddOne()">Add</button>
                    <ul id="list">
                        <li>bullshit 1</li>
                    </ul>
                </section>
                <section class="main">I'm the main section.</section>
        </body>    
    </html>
— WebBoy
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.