Сделайте тег с тегами HTML5, чтобы получить максимальную доступную высоту

Question

У меня есть HTML-страница с заголовком/контентом/нижним колонтитулом, которая использует модель flexbox и содержит тег <details>. Мне нужно, чтобы информация о контенте использовала максимальную доступную высоту, а это означает, что когда в открытом состоянии его содержимое должно занимать все пространство в своем контейнере (за исключением резюме, конечно).

Вот мой HTML/CSS код (http://jsfiddle.net/rtojycvk/2/):

HTML:

<div class="wrapper"> 
    <div class="header">Header</div> 
    <div class="main"> 
     Some text before details 
     <details class="details" open> 
      <summary>Details summary</summary> 
      <div class="content">Details content</div> 
     </details> 
    </div> 
    <div class="footer">Footer</div> 
</div> 

CSS:

html, body { 
    height: 100%; 
    margin: 0; padding: 0; 
} 

.wrapper { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    min-height: 100%; 
} 

.header { 
    height: 50px; 
    background-color: yellow; 
    flex: 0 0 auto; 
} 
.main { 
    background-color: cyan; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
} 
.footer { 
    height: 50px; 
    background-color: green; 
    flex: 0 0 auto; 
} 
.content { 
    background-color: blue; 
    color: white; 
    flex: 1; 
} 
.details { 
    background-color: red; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
} 

Как вы можете видеть, детали помечать себя принимает все доступное пространство, но не его содержание.

P.S. Мне нужно, чтобы это работало только в Chrome.

Answer 1

http://jsfiddle.net/rtojycvk/16/

рабочее положение абсолютного на содержание, положение относительно на деталях, и известково() CSS (чтобы компенсировать суммарную высоту)

.content { 
    background-color: lightgray; 
    color: black; 
    flex: 1; 
    display:flex; 
    position:absolute; 
    height: calc(100% - 18px); 
    width: 100%; 
} 
.details { 
    background-color: gray; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    position:relative; 
} 

надеюсь, что это помогает! (Я изменил цвета, потому что они были немного яркими для меня: p)

Answer 2

Абсолютное расположение. Содержание и детали относительно. fiddle

html, body { 
    height: 100%; 
    margin: 0; padding: 0; 
} 

.wrapper { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    min-height: 100%; 
} 

.header { 
    height: 50px; 
    background-color: yellow; 
    flex: 0 0 auto; 
} 
.main { 
    background-color: cyan; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
} 
.footer { 
    height: 50px; 
    background-color: green; 
    flex: 0 0 auto; 
} 
.content { 
    background-color: blue; 
    color: white; 
    flex: 1; 
    position: absolute; 
    top: 3%; 
    bottom: 0; 
    height: 97%; 
    width: 100%; 
} 
details { 
    position: relative; 
} 
summary{ 
    height: 3%; 
} 
.details { 
    background-color: red; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
} 

Answer 3

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

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height:100vh; 
 
    background: orange; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    height:100vh; 
 
    background: pink; 
 
} 
 

 
.header, 
 
.footer { 
 
    height: 10vh; 
 
    min-height: 25px; /* (or max-height, or both!) */ 
 
    max-height: 50px; 
 
    background-color: yellow; 
 
    flex: 0 0 auto; 
 
} 
 

 
.footer { 
 
    background-color: green; 
 
} 
 

 
.main { 
 
    background-color: cyan; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: calc(100vh - 20vh); /* 10vh * 2 (.header + .footer sizes) */ 
 
} 
 

 
.content { 
 
    background-color: blue; 
 
    color: white; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: calc(100vh - 20vh); /* 10vh * 2 (.header + .footer sizes) */ 
 
} 
 

 
.details { 
 
    background-color: red; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="wrapper"> 
 
    <header class="header">Header</header> 
 
    <main class="main"> 
 
     Some text before details 
 
     <details class="details" open> 
 
      <summary>Details summary</summary> 
 
      <div class="content">Details content</div> 
 
     </details> 
 
    </main> 
 
    <footer class="footer">Footer</footer> 
 
</div>

Fiddle здесь: http://jsfiddle.net/ALXWebDev/wxm0v49c/

Надеется, что это помогает!