Wie zu zwingen, position absolute mit 100% Breite zu passen, die in übergeordnete div mit padding?

Ich habe 2 divs, ein äußerer div, die ein Elternteil und ein Kind div. Das äußere div ist, ist die position verwandten mit padding 20 px für Links und rechts, während das Kind ist position absolute mit 100% widthg. Wie kann ich erzwingen, das Kind, das position absolute zu sein, in der Eltern, dh respektieren die 20px padding (innen-Eltern-und in die 20px padding)

Habe ich getan, hier das Beispiel: http://www.bootply.com/nyGZzTVY8v

Hab ich überlesen box-sizing, aber ich verstehe immer noch nicht, wie es zu implementieren, korrekt. Versucht, indem es auf der box1-Klasse und nichts passiert, versucht man auf der box2 Klasse und nichts passiert, auch.

vielen Dank im Voraus.

Weiterer Hinweis: Es hat zu reagieren, dh ich weiß nicht, die Größe des übergeordneten div-also die 100% für das Kind div.

NÖ, nicht 2 divs in deinem Beispiel. 1 div, 1 p und 1 ein.

InformationsquelleAutor StrangeLove | 2015-01-09

  1. 8

    Setzen Sie einfach left: 20px; und right: 20px; und entfernen width: 100%

    Live-Demo

    .box2 {
    position: absolute;
    padding: 50px 0;
    color: #000;
    background: #fff;
    left: 20px;
    right: 20px;
    border: solid thin #06F;
}

    oder fügen Sie left: 20px; und die calc-Funktion width: calc( 100% - 40px )

    .box2 {
position: absolute;
width: calc( 100% - 40px );
padding: 50px 0;
color: #000;
background: #fff;
left: 20px;
border: solid thin #06F;
}

    live-Demo

    Links: 0 passt in das übergeordnete box, aber nicht die Achtung der Eltern Polsterung Abstand. Eigentlich wollte ich die box2 drin sein box1 und unter Wahrung der Polsterung. Trotzdem danke.
    verwenden Sie die linken und rechten bootply.com/QfXswy7K9f oder die calc - Funktion finden Sie unter bootply.com/bEE3IHKMVg .
    Vielen Dank der calc das problem zu lösen. Ich dachte, box-sizing würde den trick tun. nun lernen Sie etwas neues. Danke.
    Arbeitete für mich. Dank

    InformationsquelleAutor Gildas.Tambo

  2. 2

    Wenn es hat zu reagieren, könnte man hinzufügen, die die Polsterung als Marge und dann nutzen Sie calc für die Breite:

    .box2 {
    position: absolute;
    width: calc(100% - 40px);
    left: 0px;
    padding: 50px 0;
    margin: 0 20px;
    colour: #000;
    background: #fff;
    border: solid thin #06F;
}
    Sorry, es werden schnelle, ich bin nur einen Teil der gesamten Konstruktion.
    brauchen Sie, um den zweiten div position absolute?
    Ja ich weiß, ich werde es brauchen, um zu halten, um eine position zu einem späteren Zeitpunkt und Größe ändern, selbst wenn der browser die Größe ändern. Alles ist in Ordnung, außer, dass reizt die extra-Raum des Kindes. Ich weiß, ich kann reduzieren die 100% zu so etwas wie 95% oder so, aber ich glaube nicht, dass es die richtigen Lösungen.
    Ich aktualisiert, das sollte jetzt funktionieren.
    Vielen Dank der calc das problem zu lösen. Ich dachte, box-sizing würde den trick tun. nun lernen Sie etwas neues. Danke.

    InformationsquelleAutor KreaTief

  3. 0

    Sobald Sie position absolute wird der div nicht in seiner übergeordneten div.stattdessen können Sie die position mit und geben es width:inherit diese Erben die Breite des übergeordneten div

    Sorry, aber Erben ist nicht so. Es hat keine Wirkung, wenn overflow nicht definiert ist.

    InformationsquelleAutor Sameer Shaikh

Schreibe einen Kommentar