Trzy pionowo ułożone DIV z przewijanym środkiem

Question

Czy można ułożyć w pionie trzy DIV i czy w środku znajduje się tylko środkowe przewijanie div? Nie chcę jednak używać wysokości pikseli, ponieważ DIV znajdują się w oknie dialogowym, które można zmieniać rozmiar. Coś takiego (przepraszam mój kiepski ASCII sztukę):

+-----------+ 
| Header | 
+-----------+ 
|   ^| 
|   || 
| Scroll || 
|   || 
|   v| 
+-----------+ 
| Footer | 
+-----------+ 

Celem jest mieć nagłówek i stopkę oraz stałe i, jak okno rośnie, środkowy div będzie rosnąć pionowo. Może po prostu jestem głupi, ale walczę z tym od kilku godzin i nie mogę tego naprawić. Trzy DIV prawdopodobnie muszą znajdować się w "innym" DIV, ale kiedy to zrobię i ustawię wysokość na 100%, rośnie ona w miarę wzrostu środkowego DIV. Ponownie, prawdopodobnie jest to coś głupiego, o czym nie myślę. Próbowałem również używać TABLI bez rezultatu.

Dzięki za pomoc.

Answer 1

To powinno działać

<div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
</div> 

---

redakcją - dla nagłówka i stopki stałej pozycji w modalnej dialogowym

<div id="wrapper" style="position:relative; overflow:hidden; height:100%; width:100%;"> 
    <div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
    </div> 
</div> 

Answer 2

Wracając do roku 2017. Z tego schematu flexbox, może to teraz zrobić bez konieczności wyraźnego definiowania wysokości nagłówka i stopki. Działa to, przynajmniej z góry, we wszystkich przeglądarkach, które obecnie mają znaczący udział w rynku, z wyjątkiem IE < = 10, który nadal ma 1-5% udziału w zależności od tego, kogo zapytasz. Ponieważ jest to zazwyczaj mechanizm wizualny/usability i nie blokuje funkcjonalności, korzystanie z Flexbox w tym przypadku powinno przynajmniej pozostawić stronę użyteczną dla użytkowników nieobsługiwanych przeglądarek.

Wszystko, co musisz zrobić, to owiń nagłówka, treści i stopki w div, który ma wyraźny wzrost (na przykład ciało lub jego dziecka ze 100% wzrostu), ze stylami:

display: flex; 
    flex: auto; 
    flex-direction: column; 

I zastosować styl do przewijalnej okienku:

overflow-y: auto; 

Jeśli chcesz panel przewijania rośnie więc służy wszystkim pionie:

flex-grow: 1; 

i nagłówkiem i stopką (niezbędnego dla Safari i IE 10):

flex-grow: 0; 

https://jsfiddle.net/ornsk10a/