Frage Setzen Sie eine feste div auf 100% Breite des übergeordneten Containers


Ich habe einen Wrapper mit etwas Padding, ich habe dann ein Floating relative Div mit einer prozentualen Breite (40%).

Innerhalb der floating relative div habe ich eine feste div, die ich gerne die gleiche Größe wie seine Eltern haben würde. Ich verstehe, dass ein festes div aus dem Fluss des Dokuments entfernt wird und als solches die Polsterung des Wrappers ignoriert.

HTML

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

Hier ist die obligatorische Geige: http://jsfiddle.net/C93mk/489/

Kennt jemand einen Weg, dies zu erreichen?

Ich habe die Geige geändert, um mehr Details zu zeigen, was ich zu erreichen versuche, sorry für die Verwirrung: http://jsfiddle.net/EVYRE/4/


75
2017-07-23 09:50


Ursprung


Antworten:


Sie können den Rand für den .wrap-Container anstelle des Auffüllens für .wrapper verwenden:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle


39
2017-07-23 10:12



Wie wäre es mit Dies?

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

Mit jQuery können Sie jede Art von Breite einstellen :)

EDIT: Wie von Dream in den Kommentaren angegeben, ist die Verwendung von JQuery nur für diesen Effekt sinnlos und sogar kontraproduktiv. Ich habe dieses Beispiel für Leute gemacht, die JQuery für andere Sachen auf ihren Seiten benutzen und es auch für diesen Teil verwenden möchten. Ich entschuldige mich für die Unannehmlichkeiten, die meine Antwort verursacht hat.


2
2017-07-23 09:58



Sie können absolute Positionierung verwenden, um die Fußzeile an die Basis des übergeordneten Elements anzuheften. Ich habe auch 10px padding-bottom zum Wrap hinzugefügt (passen Sie die Höhe der Fußzeile an). Die absolute Positionierung ist relativ zum übergeordneten div und nicht außerhalb des Flusses, da Sie ihm bereits das relative position-Attribut gegeben haben.

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/


1
2017-07-23 11:15



Versuchen Sie, eine Transformation zum Parent hinzuzufügen (muss nichts tun, könnte eine Null-Übersetzung sein) und setzen Sie die Breite des fixierten Kindes auf 100%

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}
<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>


1
2017-12-12 15:09



Oben auf Ihrem neuesten jsfiddleDu hast nur eins verpasst:

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

Aber wie wird das dein Problem lösen? Einfach, lass uns erklären, warum größer ist als zuerst erwartet.

Festes Element #sidebar verwendet die Fensterbreite als Basis, um seine eigene Größe zu erhalten, wie jedes andere feste Element, sobald dieses Element definiert ist width:inherit und #sidebar_wrap hat 40% als Wert in der Breite, wird dann berechnet window.width * 40%dann, wenn deine Fensterbreite größer ist als deine .container Breite, #sidebar wird größer sein als #sidebar_wrap.

Dies ist übrigens, müssen Sie eine maximale Breite in Ihrem festlegen #sidebar_wrap, um zu verhindern, größer zu sein als #sidebar_wrap.

Überprüfen Sie dies jsfiddle das zeigt einen Arbeitscode und erklärt besser, wie das funktioniert.


0
2017-10-16 20:46



Mann Ihr Container ist 40% der Breite des Elternelements

Wenn Sie jedoch position: fixed verwenden, basiert die Breite auf der Breite des Ansichtsfensters (Dokument).

darüber nachzudenken, ich erkannte, dass Ihr Elternelement 10% Polsterung (links und rechts) haben, bedeutet dies, dass Ihr Element 80% der gesamten Seitenbreite haben. Ihr fixiertes Element muss also 40% basierend auf 80% der Gesamtbreite haben

Du musst also nur deine #fixed-Klasse ändern

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

Wenn Sie sass, postcss oder einen anderen css-Compiler verwenden, können Sie Variablen verwenden, um zu vermeiden, dass das Layout beim Ändern des Auffüllwerts des übergeordneten Elements beschädigt wird.

Hier ist die aktualisierte Geige http://jsfiddle.net/C93mk/2343/

ich hoffe es hilft, grüße


0
2017-12-01 17:50



Löschen Padding: 10%; oder benutzen px Anstatt von Prozent zum .wrap

siehe das Beispiel: http://jsfiddle.net/C93mk/493/

HTML:

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

CSS:

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}

-3
2017-07-23 10:01