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

Question 1

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.

Question 2

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 .

Question 3

Das hat bei mir funktioniert

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

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}

Question 4

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.

Question 5

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).

Question 6

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;
}

Question 7

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.

Question 8

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!

Question 9

Vielleicht suchen Sie nach mehrspaltigen Layouts, die sofort einsatzbereit sind?

Question 10

Ich denke, heute würde man wahrscheinlich Flexbox dafür verwenden. Siehe das Beispiel des Heiligen Grals .

Question 11

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>

Question 12

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>

Question 13

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.

Question 14

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.

Question 15

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!

Question 16

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>

Answer 1

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.

Answer 2

Können Sie bitte auch Ihr Markup zeigen?

Björn

Answer 3

Zweitens wäre ein Aufschlag eine Hilfe. Und würde es uns ermöglichen, spezifische CSS oder Vorschläge anzubieten.

David sagt, Monica am

Answer 4

angulartutorial.blogspot.in/2014/04/…

Prashobh

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

4

Antworten können teuer, erschwinglich oder billig sein und diese Antwort ist billig.

John

Answer 10

3

Sie können auch alt und ihrer Zeit angemessen sein.

Arve Systad

Answer 11

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

Answer 12

6

Das ist großartig, irgendwelche Nachteile?

Kinet

Answer 13

Perfekt auch für mich! Vielen Dank!

Deekor

Answer 14

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

Answer 15

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

Answer 16

1

Für den Fall, dass jemand wie ich blind ist: Vergiss den overflow: hiddenTeil nicht, sonst passieren schlimme Dinge.

Doodad

Answer 17

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

Answer 18

Ich bin froh, dass das für Sie funktioniert hat, siehe meine Notiz über die Mängel.

Adam Grant

Answer 19

Funktioniert auch bei mir. Vielen Dank! Ich denke, das ist der beste Weg.

Fuhrmann

Answer 20

Wenn Sie jedoch viel Inhalt haben, füllt die Seitenleiste beim Scrollen nach unten nicht mehr die volle Höhe.

TheYaXxE

Answer 21

Richtig, und das habe ich am Ende meiner Antwort notiert.

Adam Grant

Answer 22

1

@wranvaud Es gibt dieses: stackoverflow.com/a/32639892/393243

Adam Grant

Answer 23

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).

Answer 24

1

Wow, dieses tolle Tischlayout ohne Tische!

Dom

Answer 25

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

Answer 26

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

Answer 27

2

Sieht so aus, als wäre dies die beste Antwort an diesen Tagen.

MarkSkayff

Answer 28

1

Vielleicht möchten Sie auch hinzufügen, flex-flow:wrapwenn Ihre Seitenelemente nicht mehr verpackt werden

wranvaud

Answer 29

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.

Answer 30

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!

Answer 31

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

Answer 32

2

Vielleicht suchen Sie nach mehrspaltigen Layouts, die sofort einsatzbereit sind?

Strager
quelle

Answer 33

2

Ich denke, heute würde man wahrscheinlich Flexbox dafür verwenden. Siehe das Beispiel des Heiligen Grals .

Frank Lämmer
quelle

Sie müssen Ihrer Antwort weitere Details hinzufügen. Warum sollte man dafür Flexbox verwenden?

Miguel-F

Answer 34

Sie müssen Ihrer Antwort weitere Details hinzufügen. Warum sollte man dafür Flexbox verwenden?

Miguel-F

Answer 35

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>

Answer 36

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>

Answer 37

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.

Answer 38

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.

Answer 39

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

Answer 40

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>

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

Antworten: