CODEWITHSUNDEEP
htmlcssflexbox
Norfolc
Norfolc

Reputation: 458

Make HTML5 details tag to take maximum available height

I have an HTML page with header/content/footer that uses flexbox model and contains <details> tag. I need to make details content use maximum available height, meaning that when in opened state its content should occupy all space in its container (except for summary of course).

Here is my HTML/CSS code (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;
}

As you can see, the details tag itself takes all the available space, but not its content.

P.S. I need this to work only in Chrome.

Upvotes: 4

Views: 2783

Answers (3)

Alex
Alex

Reputation: 643

For those who prefer not to set absolutes positions, or can't do it, there is another way to accomplish it: using vh for height of .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's here: http://jsfiddle.net/ALXWebDev/wxm0v49c/

Hope it helps!

Upvotes: 1

indubitablee
indubitablee

Reputation: 8206

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

use position absolute on content, position relative on details, and calc() css (to offset the summary height)

.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;
}

hope this helps! (I changed the colors cause they were a bit bright for me :p)

Upvotes: 3

Paul B&#246;nisch
Paul B&#246;nisch

Reputation: 294

Absolute positioned .content and details relative. 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;
}

Upvotes: 1

Related Questions