CSS-Tabelle mit skalierbaren div an den Seiten

Question

Ich habe eine zentrale div, die 4 andere Divs arrount haben (oben, rechts, links, unten).

Nach oben und Unten divs sind fixiert. Sie müssen weder Höhe noch Breite erhöhen.

Rechts und links divs sind NUR zur Vergrößerung der Breite vorgesehen.

Wie?

Der "Inhalt" div (zentral) ist eine Tabelle, die beliebig viele Zeilen enthalten kann. Dann möchte ich die Höhe der linken und rechten divs je nach der Höhe des "Inhalts" erhöhen oder verringern.

Ich möchte das automatisch tun.

Wie kann ich das tun?

Ich habe ein Beispiel mit dem, was ich getan habe, ohne Erfolg erstellt.

https://jsfiddle.net/y6ad2crg/4/

<div class="pantalla"> 
    <div class=" pantallaSup"></div> 

     <div class="pantallaEsq"></div> 
     <div class="pantallaDre"></div> 

     <div class="interiorPantalla"> 
      content<br> 
      aaa<br> 
      bbb<br> 
      ccc<br> 
      ddd<br> 
      eee 
     </div> 
     <div class="pantallaInf"></div> 
</div> 

---

Das Ergebnis, das ich zu bekommen ist, dass:

Was mache ich falsch?

Vielleicht kleine Dinge in CSS nur die Änderung es getan werden kann, oder vielleicht ist mein html falsch ausgelegt ...

Answer 1

Änderung u Code https://jsfiddle.net/p7haf3oo/

.pantalla { 
 
    /*position: relative;*/ 
 
    display: block; 
 
    width: 690px; 
 
    background-color: gray; 
 
} 
 

 
.pantallaSup { 
 
    height: 200px; 
 
    width: 100%; 
 
    background: orange; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 

 
.pantallaEsq { 
 
    width: 69.4px; 
 
    border-right: 4px solid black; 
 
    background: red; 
 
    display: block; 
 
} 
 

 
.pantallaDre { 
 
    width: 69.4px; 
 
    border-left: 4px solid black; 
 
    background: red; 
 
    display: block; 
 
    align-self: stretch; 
 
    min-height: 100px; 
 
} 
 

 
.pantallaInf { 
 
    height: 200px; 
 
    width: 100%; 
 
    background: orange; 
 
} 
 

 
.interiorPantalla { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    border: 1px; 
 
    border-color: blue; 
 
    border-style: solid; 
 
    width: 550px; 
 
    background-color: white; 
 
}

<div class="pantalla"> 
 
    <div class="pantallaSup"></div> 
 
    <div class="flex"> 
 
    <div class="pantallaEsq"></div> 
 
    <div class="interiorPantalla"> 
 
     content 
 
     <br> aaa 
 
     <br> bbb 
 
     <br> ccc 
 
     <br> ddd 
 
     <br> eee 
 
    </div> 
 
    <div class="pantallaDre"></div> 
 
    </div> 
 
    <div class="pantallaInf"></div> 
 
</div>

Answer 2

Ich glaube, ich codiert haben, was Sie suchen - https://jsfiddle.net/Shuaso/vpmn3LLv/

ich alle entfernt die unnötigen divs und verwendeten CSS-Rahmen und Hintergrundfarben, um den gleichen Effekt zu erzielen. Sie können den Inhalt im div "content" ändern und die dynamischen Stile anzeigen. Hier ist der Code:

CSS:

.container { 
    width: 500px; 
    background-color: orange; 
    padding: 20px 0; 
} 
.content { 
    border-left: 20px solid red; 
    border-right: 20px solid green; 
    background-color: white; 
} 

HTML:

<div class="container"> 
    <div class="content"> 
    <p>test</p> 
    <p>test</p> 
    </div> 
</div>