Wie kann ich meine Seitenleiste unten auf meiner Responsive-Webseite anzeigen lassen?

Question

Zum ersten Mal auf diesen Boards, also bitte gehen Sie einfach.

Ich habe versucht, meine Website http://sartorialequity.com/ reagieren durch Verwendung von Medienabfragen. Meine rechte Seitenleiste wird derzeit jedoch oberhalb meines Inhalts angezeigt, während ich möchte, dass sie am Ende meines Inhalts angezeigt wird.

Hier ist eine vereinfachte Version von meinem Code:

#container { 
      width: 960px; 
      margin: auto; 
     } 

#content { 
      width: 66.67%; 
     } 

#sidebar { 
      width: 260px; 
      float: right; 
      top: 70px; 
      position: relative; 
     } 

@media screen and (max-width: 768px) { 
#container { 
width: 91% 
     } 

#content { 
float: none; 
width: auto; 
line-height: 135%; 
     } 

#sidebar { 
float: none; 
width: auto; 
top: 10px; 
     } 

<div id="container"></div> 
<div id="sidebar"></div> 
<div id="content"></div> 

Die Lösungen, die ich bisher ausprobiert habe:

1. Mit display: table-footer-Gruppe

#content-sidebar-wrap {display:table;} 
#content {display:table-header-group; float: none; width: auto} 
#sidebar {display:table-footer-group; float: none; width: auto} 

Auf einem Mobiltelefon gelang es, die Seitenleiste zumindest auf der Hauptseite unterhalb des Inhalts erscheinen zu lassen. Es verursachte jedoch den Inhalt und die Seitenleiste von PermaLink Pages, sich über die Breite der Kopfzeile hinaus zu erstrecken.

2. Umstellen div id = "sidebar" und div id = "content"

<div id="container"> 
<div id="content"></div> 
<div id="sidebar"></div> 
</div> 

Auf dem Handy war dies erfolgreich in die Sidebar immer unter dem Inhalt angezeigt wird. Im Browserfenster meines PCs wurde die Seitenleiste jedoch am unteren Rand der Seite angezeigt.

Ich würde wirklich alle Vorschläge zu schätzen wissen. Vielen Dank!

Answer 1

Der Inhalt div sollte zuerst im Markup sein. Das würde das Problem lösen, das Sie haben.

Answer 2

Inhalt Aussehen betrifft nicht nur die Reihenfolge Ihrer Roh-HTML. Stile können viel verändern.

Zuerst versuchen, dieses Layout zu verwenden:

<div id="content"></div> // Content div comes first 
<div id="sidebar"></div> // Then Comes Sidebar. 

Denken Sie daran, dieses Layout bedeutet nicht, Sie Sidebar nicht direkt auf Ihre Seite verwenden. Wenn content div nicht floated ist, wird sidebar nach content kommen und am Ende der Seite nach rechts schweben. Also, du musst das content div nach links schweben lassen, das wird einen Platz von 33.3334% ergeben, es wird von sidebar ausgefüllt.
Aber für mobile Geräte, seit Sie float:none zu beiden divs gesetzt haben, wird die Reihenfolge von roh html selbst die Rolle für das Erscheinen von Sidebar nach unten spielen.

Daher versuchen einige kleinere Änderungen Stil:

#content { 
    float: left; //This line will bring the change. It is necessary. 
    width: 66.67%; 
    width: calc(100% - 294px); //you may or may not add this line 
    height: 100%; 
    font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; 
    line-height: 160%; 
}