Zentrieren einer Position: fixed div Wenn Viewport eine bestimmte Breite erreicht

Ich suche ein Layout für meine Site zu erstellen, wo eine Sidebar mit einer Breite von 30% auf der rechten Seite des Viewports fixiert ist (der Inhalt befindet sich links davon)) bis das Browserfenster eine bestimmte Breite erreicht, an welcher Stelle ich möchte, dass der Inhalt und die Seitenleiste zentriert sind und nicht mehr mit dem Browserfenster wachsen (da es bei extrem großen Breiten schwer zu lesen ist). Hier ist eine Idee des HTML verwendet:Zentrieren einer Position: fixed div Wenn Viewport eine bestimmte Breite erreicht

<body> 
<div id=sidebar>sidebar content</div> 
<div id=content>articles, images, etc</div>

Und hier einige der grundlegenden HTML verwendet werden, es zu formatieren:

#sidebar { 
    width: 30%; 
    position: fixed; 
    right: 0; 
    top: 0; 
    background-color: gray; 
} 
#content { 
    width: 70%; 
    margin-right: 30%; 
    max-width: 49em; 
}

An diesem Punkt, wenn der Inhalt wird breiter als 49em, es bleibt auf der rechten Seite der Seite haften und erzeugt eine immer größer werdende Lücke zwischen ihm und der festen Seitenleiste. Was ich möchte ist, dass es eine maximale Breite von 49em erreicht, die Seitenleiste 21em erreicht (also immer noch 70:30) und fixiert bleibt, aber diese ganze Breite von 70em im Ansichtsfenster zentriert hat.

Ich möchte auch die Hintergrundfarbe der Seitenleiste den gesamten Weg vom Rand des Inhalts auf der rechten Seite des Bildschirms (dh ein enthalten div, dass sowohl die Seitenleiste und Inhalt mit einer maximalen Breite von zentriert 70em funktioniert nicht, da der Hintergrund der Seitenleiste nur an den Rand des enthaltenden Bereichs anstelle des Viewports gehen würde. Das ist nicht so wichtig, weil es in Ordnung sein könnte, dem Körperelement einen strukturierten Hintergrund zu geben, damit es so aussieht, als ob die Seite auf einer strukturierten Oberfläche "sitzt" (nicht ideal, aber gut). Ich war nur nicht in der Lage, die Seitenleiste und den Inhalt zu zentrieren, während die feste Positionierung der Seitenleiste beibehalten wurde.

Danke!

Update: hier ist ein sehr grobes Schema, was ich suche:

| A | B | C | D |

B ist der Inhaltsbereich mit einer maximalen Breite von 49em. C ist die Seitenleiste mit der maximalen Breite von 21em UND sie muss fest positioniert sein. A und D wären die Ränder (jede Hälfte der Differenz zwischen der Breite des Darstellungsbereichs und 70em). Hintergrund von D muss die gleiche Farbe (grau) wie die Seitenleiste haben. Der Hintergrund von A muss weiß sein.

Quelle

2012-04-03 lemonmade

hinzufügen Können Sie Ihre letzte Forderung reprhase, ich verstehe es nicht (über die strukturierter Hintergrund). Eine kleine schematische Zeichnung wäre auch hilfreich. –

Aktualisiert, hoffentlich ist es ein bisschen klarer. – lemonmade

Etwas wie folgt aus:

<body> 
    <div id="wrapper"> 
     <div id="sidebar">sidebar content</div> 
     <div id="content">articles, images, etc</div> 
    </div> 
</body>

Mit CSS, die zu diesem ähnlich ist:

body { background:url(imageForSidebar.png) right top repeat-y; } 
#wrapper { 
    max-width:1000px; 
    margin:0 auto; 
    background:#FFF url(imageForSidebar.png) -66% top repeat-y; 
    position:relative; 
} 
#sidebar { 
    width:30%; 
    float:right; 
    position: fixed; 
} 
#content { margin-right:30%; }

Das Hintergrundbild auf der Körperpflege nehmen würde es an den Rand der den ganzen Weg gehen Bildschirm. Sie würden ein Hintergrundbild verwenden, das groß genug ist, um dies zu tun, aber klein genug, so dass es durch den Hintergrund #wrapper abgedeckt wird. Das Hintergrundbild auf dem Wrapper funktioniert ähnlich, aber in diesem Fall wird lediglich sichergestellt, dass das Bild der Seitenleiste immer bis zum unteren Rand des Inhalts reicht.

Quelle

2012-04-03 22:14:35

Danke, aber ich denke nicht, dass dies die Seitenleiste repariert, oder? – lemonmade

Sie müssten nur 'position: fixed;' etwas reparieren. Das habe ich in deinem ursprünglichen Post verpasst. –

Die Position: fixiert entfernt die Seitenleiste aus dem Fluss, sodass sie nicht mehr zentriert wird, wenn die Gesamtbreite 70 m überschreitet. – lemonmade

Diese Lösung die meisten Ihrer Anforderungen erfüllt, aber Sie müssen die Breite des Inhalts + Sidebar, um (in diesem Fall, habe ich 70em)

HTML:

<div id="container"> 
    <div id="content">articles, images, etc</div> 
    <div id="sidebar">sidebar content</div> 
</div>

CSS :

#sidebar { 
    width: 29%; background-color: gray; border: 1px gold solid; 
    float: left; 
    position: fixed; right: 0; top: 0; 
} 

#content { 
    width: 69%; max-width: 49em; border: 1px silver solid; 
    float: left; 
} 

#container { 
    max-width: 70em; 
    margin: 0px auto; 
}

jsFiddle here. (Sie nur durch Ziehen des mittleren Rahmen testen können links und rechts)

Quelle

2012-04-03 22:27:01

Die Sidebar wird in diesem Fall nicht behoben. Die feste Positionierung der Seitenleiste ist entscheidend. – lemonmade

Ich habe meine Antwort aktualisiert, um sie zu berücksichtigen (tut mir leid, dass ich das vermisse) –

Ja, das war, was ich vorhatte. Das Problem besteht darin, dass die feste Breite der Seitenleiste es aus dem Container div herausnimmt, sodass es nicht zentriert wird, nachdem das Ansichtsfenster die eingestellte Breite überschritten hat. – lemonmade

Sie können Medienanfragen in Ihrem css

//your normal css 
#sidebar { 
width: 30%; 
position: fixed; 
right: 0; 
top: 0; 
background-color: gray;} 

//media query (you can add max and min width of the sceen or one of both) 
@media screen and (min-width:500px) { 
    #sidebar{ 
     //css you want to apply when when width is changed 
} 
}

Quelle

2016-09-28 07:49:28 Chopper

Zentrieren einer Position: fixed div Wenn Viewport eine bestimmte Breite erreicht

Antwort

Verwandte Themen