Responsive Seitenleiste

Lesezeit: 2 Minuten

Was ist die beste Lösung für eine responsive Seitenleiste? Ich habe einen Kopfbereich, einen Inhaltsbereich, einen Fußbereich und einen Seitenleistenbereich. Bei kleineren Bildschirmen möchte ich, dass die Seitenleiste von der rechten Seite abfällt und unter dem Inhaltsbereich und über der Fußzeile endet. Wie mache ich das?

..................................................................................
.                                                                   .            .
.                                Header                             .            .
.....................................................................            .
.                                                                   .            .
.                                                                   .            .
.                                                                   .            . 
.                                                                   .  Sidebar   .
.                                                                   .            .
.                                Content                            .            .
.                                                                   .            .
.                                                                   .            .
..................................................................................
.                                                                                .
.                                Footer                                          .
..................................................................................                                                                                .

  • Es könnte einfacher sein, wenn Sie uns HTML und CSS in jsfiddle.net oder ähnlichem zur Verfügung stellen, um darüber zu arbeiten.

    – jtorrescr

    29. Juli 2014 um 21:19 Uhr

  • Haben Sie den Header und den Inhalt in einem div enthalten und schweben Sie das nach links und lassen Sie die Seitenleiste nach rechts schweben. Wenn die Breite weniger als X Pixel beträgt, stellen Sie die Seitenleiste so ein, dass sie nach links schwebt.

    – Howli

    29. Juli 2014 um 21:21 Uhr

Hier haben Sie einen kurzen Beispielcode, den ich erstellt habe. http://jsfiddle.net/jtorrescr/CNf8Q/ Wie von Kade Keithy erwähnt, müssen Sie mit Ihrem @media spielen, um festzustellen, in welcher Bildschirmauflösung Sie Ihr Layout ändern möchten. Setzen Sie also einfach zurück, was Sie verwenden, um Ihre Seite in @media zu erstellen.

HTML

<div id="container">
    <div id="header">
        Header
    </div>   
    <div id="content">
        Content
    </div>
     <div id="sidebar">
        sidebar
    </div>
    <div id="footer" class="clearfix">
        footer
    </div>
</div>    

CSS

#sidebar
{
    height:60px;
    background-color:orange;
    top:0;
    right:0;
}
#sidebar
{
    width:20%;
    height: 360px;
    float:right;
    margin-top:-360px;
}

#header, #content
{
    width:80%;
}

#header
{
    height:60px;
    background-color:pink;
}
#content
{
    height:300px;
    background-color:yellow;
}
#footer
{
    height:60px;
    background-color:green;
    width:100%;
}

@media (max-width: 500px) 
{    
    #container
    {
        width:100%;
    }
    #sidebar
    {
        width:100%;
        height:60px;
        float:none;
        margin-top:0;
    }
    #header, #content
    {
        width:100%;
    }
}

Dafür können Sie verwenden Medien-Anfragen. Sie ermöglichen es Ihnen, CSS basierend auf der Bildschirmgröße bedingt anzuwenden.

Hier ist ein Beispiel:

@media (min-width: 700px) {    
  .content {
    float: left;
  }    
}

Was Sie also wahrscheinlich tun würden, ist, den Float der Seitenleiste basierend auf der Bildschirmgröße zu ändern.

Ich empfehle diesen Leitfaden für weitere Informationen: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

1345670cookie-checkResponsive Seitenleiste

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy