Absolut positioniertes untergeordnetes untergeordnetes Element

Question

#outerposition:absolute oder fixed.

Wie kann ich diese haben, so dass die Werte in 100%#inner bezüglich zu #outer ‚s Breite minus seiner Polsterung (beispielsweise wie ein Rahmen), und haben nicht #inner Überlauf?

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    width: 100%; 
 
} 
 
#outer { 
 
    background: red; 
 
    height: 50%; 
 
    padding: 20px; 
 
    position: absolute; 
 
    width: 50%; 
 
} 
 
#inner { 
 
    background: yellow; 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
}

<div id="outer"> 
 
    <div id="inner"></div> 
 
</div>

JSFiddle

Answer 1

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#outer { 
 
    background: red; 
 
    height: 50%; 
 
    width: 50%; 
 
    /* padding: 20px; */     /* 1 */ 
 
    position: absolute; 
 
} 
 
#inner { 
 
    background: yellow; 
 
    position: absolute; 
 
    height: calc(100% - 20px);   /* 2 */ 
 
    width: calc(100% - 20px);   /* 2 */ 
 
    top: 50%;       /* 3 */ 
 
    left: 50%;       /* 4 */ 
 
    transform: translate(-50%, -50%); /* 5 */ 
 
}

<div id="outer"> 
 
    <div id="inner"></div> 
 
</div>

Hinweise:

1. Das Padding auf dem übergeordneten Element wird vom untergeordneten Objekt ignoriert, das absolut positioniert ist und daher aus dem Dokumentfluss entfernt wird. Passen Sie stattdessen die Größe des Kindes an, um einen ähnlichen Effekt zu erzielen.
2. Breite und Höhe des untergeordneten Elements wird so berechnet, dass 20-px-Padding für das übergeordnete Element emuliert wird.
3. Vertically zentrales Element
4. horizontal mittleres Element
5. Make vertical and horizontal centering precise.

Answer 2

Etwas weniger komplizierter Code, obwohl es Flex-Box verwendet, die nicht in älteren Browsern arbeiten.

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#outer { 
 
    background: red; 
 
    height: 50%; 
 
    width: 50%; 
 
    position: absolute; 
 
    display: flex; 
 
} 
 
#inner { 
 
    box-sizing: border-box; 
 
    background: yellow; 
 
    height: calc(100% - 20px); 
 
    width: calc(100% - 20px); 
 
    margin: auto; 
 
    flex: 0 1 1; 
 
}

<div id="outer"> 
 
    <div id="inner"></div> 
 
</div>