Заголовок/Контент/Нижний колонтитул внутри определенного div?

Question

Я считаю, что это вид очень простой вопрос, но я не могу понять, хорошее решение

Как я могу иметь заголовок

• : всегда на вершине
• сноске: всегда на нижней
• содержание: прямо под заголовком. он должен начинаться сразу после заголовка, и если содержимого слишком много, его следует прокручивать.

в пределах определенного div? а не весь экран

Я пытался с помощью гибкой коробки и прекрасно работал, когда в content было много контента, но когда есть только несколько из содержимого в content, вы можете по центру :(. Я хочу, чтобы он был выровнен по высоте .

Вот что я сделал до сих пор: http://fiddle.jshell.net/nacho4d/ddv7ytkf/1/

HTML:

<div id="main"> 
    <div style="background-color:lightblue;" class="header">Header - height is variable but just a couple of lines at maximum. Should not overflow</div> 
    <div style="background-color:khaki;" class="content"> 
     <div> 
      Content - height is variable. There could be a lot of content here so its overflow should be auto.<br/> 
      "Lorem ipsum ... Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? " 
     </div> 
    </div> 
    <div style="background-color:pink;" class="footer">Footer</div> 
</div> 

CSS:

#main { 
    width: 400px; 
    height: 250px; 
    border: 1px solid #c3c3c3; 

    display: flex; 
    display: -webkit-flex; 

    -webkit-justify-content: space-between; 
    justify-content: space-between; 

    -webkit-flex-direction: column; 
    flex-direction: column; 
} 
.header { 
} 
.content { 
    overflow:auto 
} 
.footer { 
} 

ОТВЕТ:

В основном такой же, как @Abhitalks ответ, я просто добавил WebKit префиксы поставщика: http://fiddle.jshell.net/nacho4d/ddv7ytkf/11/ Он отлично работает!

Answer 1

Вы забыли правило flex о детях.

.header { 
    flex: 0 0 auto; /* do not grow or shrink, keep the flex basis auto */ 
} 
.content { 
    flex: 1 1 auto; /* grow or shrink as appropriate */ 
    overflow:auto 
} 
.footer { 
    flex: 0 0 auto; /* do not grow or shrink, keep the flex basis auto */ 
} 

Fiddle: http://fiddle.jshell.net/ddv7ytkf/5/

Answer 2

http://fiddle.jshell.net/ddv7ytkf/8/

Это то, что вы имели в виду? (см. скрипку) Вставьте больше текста в поле содержимого, и он должен прокручиваться, если он больше, чем заданная высота.

CSS

#main { 
    width: 400px; 
    border: 1px solid #c3c3c3; 
    overflow-x: hidden; 
    display: block; 
    overflow-y: scroll; 
} 
.wrapper {  
    height: 150px; 
} 
.header { 
    top: 0; 
    height: auto; 
} 
.content { 
    position:relative; 
    overflow:visible; 
} 
.footer { 
    bottom: 0; 
    position: relative; 
} 

HTML

<div id="main"> 
    <div class="wrapper"> 
     <div style="background-color:lightblue;" class="header">Header - height is variable but just a couple of lines at maximum. Should not overflow</div> 
     <div style="background-color:khaki;" class="content"> 
     <p>Content - height is variable. There could be a lot of content here so its overflow should be Content - height is variable. There could be a lot of content here so its overflow should be Content - height is variable. There could be a lot of content here so its overflow should be Content - height is variable. There could be a lot of content here so its overflow should be Content - height is variable. There could be a lot of content here so its overflow should be</p> 
    </div> 
     <div style="background-color:pink;" class="footer">Footer</div> 
    </div> 
</div> 

Answer 3

.content { flex-grow: 1; } вы должны получить результат вы после этого, но предпочтительный метод вместо этого использовать flex свойство, которое принимает три параметра, которые стенография для flex-grow, flex-shrink и flex-basis (в указанном порядке).

Второй и третий не является обязательным, хотя, так что если вы установите только один параметр (flex: 1;) это то же самое, как написание flex-grow: 1;

по умолчанию является flex: 0 1 auto;, так что написание flex: 1; дает тот же результат (в данном случае) как flex: 1 1 auto;.Но что странное поведение flex является то, что в то время как flex: 1; и flex: 1 1 auto; дают тот же результат, flex: auto; и flex: auto 1 auto; нет (кстати, flex: auto; также будет вам результат вы после этого, flex: auto 1 auto; не будет). Это из-за того, что flex «разумно» устанавливает два других значения, поэтому остерегайтесь неожиданных результатов, когда вы используете эту стенографию.

Так .content { flex: 1; } или .content { flex: auto; } должен сделать трюк, просто помнить о том, как эти значения могут изменяться после изменения flex-shrink и flex-basis.