制作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>

小提琴是在这里：http://jsfiddle.net/ALXWebDev/wxm0v49c/

希望它能帮助！