Problem der absoluten vollen Breite der CSS-Position

77

Ich habe 2 Divs und ein DL:

<div id="wrap">
 <div id="header">
  <dl id="site_nav_global_primary">

und das ist mein Stil:

#wrap {
margin:0 auto;
width:100%;
min-width:760px;
max-width:1003px;
overflow:hidden;
}

#header {
width:100%;
position:relative;
float:left;
padding-top:18px;
margin-bottom:29px;
}

#site_nav_global_primary {    
float:right;
margin-right:18px;
margin-bottom:11px;
margin-left:18px;
}

Jetzt möchte ich site_nav_global_primary so ändern, dass es eine volle Bildschirmbreite hat, ohne den Wrap und den Header zu ändern. aber wenn ich es versuche:

#site_nav_global_primary {    
position: absolute;
width:100%;
top:0px;
left:0px;
}

Die Navigation erhält 100% des Wrappers, was einer maximalen Breite von 1003 Pixel entspricht. Ich möchte, dass es sich maximal ausdehnt, ohne die Wrap- und Header-Divs zu ändern.

Ist das möglich?

html css

— Tom
quelle

Warum soll es breiter sein als der Container? Für mich scheint es so, als ob Sie das dl außerhalb der enthaltenen divs nehmen sollten, wenn Sie nicht möchten, dass es an deren Einschränkungen gebunden ist.

— DoctorMick

240

Sie können sowohl leftals auch rightproperty auf setzen 0. Dadurch wird das div auf die Dokumentbreite ausgedehnt, es muss jedoch kein übergeordnetes Element positioniert werden (was unter den gegebenen Umständen nicht der Fall #headerist position: relative;).

#site_nav_global_primary {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

Demo an: http://jsfiddle.net/xWnq2/ , wo ich entfernt position:relative;von#header

— xec
quelle

1

Nur eine Nebenbemerkung, links und rechts, akzeptieren auch negative Werte, siehe: jsfiddle.net/xWnq2/1, aber Eltern müssen keinen Überlauf haben: versteckt; - Dies wird es Ihnen nicht leicht machen, es auf "Maximum" zu

— dehnen

Ugh, das hat endlich mein seltsames ie11Problem behoben , bei dem absolute und feste Divs sich 3k Pixel breit machten ...

— Phil

23

Sie müssen das position:relativeElement #wrap hinzufügen .

Wenn Sie dies hinzufügen, werden alle untergeordneten Elemente in diesem Element und nicht im Browserfenster positioniert.

— Andrzej Ośmiałowski
quelle

versuchte es, funktioniert nicht .. immer noch die 100% der maximalen 1003px

— Tom

@ Tom irgendein Rand, Polsterung, Ränder?

— Andrzej Ośmiałowski

4

Ich habe eine ähnliche Situation. In meinem Fall hat es keinen Elternteil mit Position: relativ. Fügen Sie hier einfach meine Lösung für diejenigen ein, die sie möglicherweise benötigen.

position: fixed;
left: 0;
right: 0;

— Sem
quelle

0

#site_nav_global_primaryStellen Sie die Position als fest ein und stellen Sie die Breite auf 100% und die gewünschte Höhe ein.

— Prabhat Tiwari
quelle

-1

Ich weiß nicht, ob dies das ist, was Sie wollen, aber versuchen Sie, den Überlauf zu entfernen: versteckt vor #wrap

— Sylwia
quelle

Ich habe Ihren Code kopiert, i FX ausgeführt, um den Überlauf von #wrap zu entfernen, und es funktioniert

— Sylwia