HTML : Блоки на всю высоту экрана но не больше

Question

На первый взгляд задача показалась легкой, но не поолучилось)

Условие: Три основных блока: header, main и footer - занимают всю высоту окна.

Header - всегда сверху, высота блока может изменятся. Main - от хедера до футера. Footer - всегда снизу, высота может изменятся.

Это легко делается с помощью css: flex-direction: column;

НО! если в MAIN много контента, нужно чтоб header остался сверху, footer снизу, а ~~MAIN~~ блок TABa прокручивался. Как сделать чтоб MAIN занимал всю высоту экрана от HEADER к FOOTER но не больше.

Для чего это мне? в MAIN у меня вкладки(табы), длинные, мне нужно чтоб при прокрутке прокручивался отдельный таб, а не весь BODY. Пример кода - https://jsfiddle.net/36qfsyha/3/

<body>
<header>
 <nav>
  <p data-tab="tab1" class="active">TAB-1</p>
  <p data-tab="tab2">TAB-2</p>
 </nav>
</header>
<main>
<div class="tab_container">
  <div id="tab1" class="active">
    TAB-2 CONTENT<br/>
     TAB-2 CONTENT<br/>
      TAB-2 CONTENT<br/>
  </div>
  <div id='tab2'>
    TAB-1 CONTENT<br/>
     TAB-1 CONTENT<br/>
      TAB-1 CONTENT<br/>
       TAB-1 CONTENT<br/>
        TAB-1 CONTENT<br/>
         TAB-1 CONTENT<br/>
          TAB-1 CONTENT<br/>
  </div>
</div>
</main>
<footer>
  SOME FOOTER
</footer>
</body>

CSS:

body {
  height: 150px;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 1 auto;
}
nav p:not(.active):hover{
  background: grey;
}

Answer 1

Так? Добавил блоку main стили height:100%; overflow-y: scroll;

$('nav p').click(function (){
    $(this).addClass('active');
  $(this).siblings().removeClass('active');
  $('#'+$(this).data('tab')).addClass('active');
  $('#'+$(this).data('tab')).siblings().removeClass('active');
})

body {
  height: 150px;
  display: flex;
  flex-direction: column;
}
main {
  height:100%;
  flex: 1 1 auto;
  overflow-y: scroll;
}
nav p:not(.active):hover{
  background: grey;
}



/*:::::::SIMPLE CSS::::::::*/
body {
    border: 3px solid red;
  padding: 2px;
}
header, main, footer {
  border: 1px dashed black;
  padding: 4px 0;
}
nav {
  display: flex;
}
nav p {
  border: 2px solid green;
  padding: 3px 5px;
  margin: 0 3px;
  cursor: pointer;
}
nav p.active {
  background: green;
}
.tab_container > div:not(.active) {
  display: none;
}
footer {
  background: black;
  color: white;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <header>
    <nav>
      <p data-tab="tab1" class="active">TAB-1</p>
      <p data-tab="tab2">TAB-2</p>
    </nav>
  </header>
  <main>
    <div class="tab_container">
      <div id="tab1" class="active">
        TAB-2 CONTENT<br/>
         TAB-2 CONTENT<br/>
          TAB-2 CONTENT<br/>
      </div>
      <div id='tab2'>
        TAB-1 CONTENT<br/>
         TAB-1 CONTENT<br/>
          TAB-1 CONTENT<br/>
           TAB-1 CONTENT<br/>
            TAB-1 CONTENT<br/>
             TAB-1 CONTENT<br/>
              TAB-1 CONTENT<br/>
      </div>
    </div>
  </main>
  <footer>
    SOME FOOTER
  </footer>
</body>

Answer 2

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

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header, footer {
  flex: 0 0 auto;
}

main {
  flex: 1 1 0px;
  overflow: auto;
}

div {
  animation: height 3s linear infinite alternate;
  background: silver;
}

@keyframes height {
  from { height:  50vh; }
  to   { height: 150vh; }
}

<header>Header</header>
<main><div>Main...</div></main>
<footer>Footer<br>Footer</footer>

БЛОГ НА HUSL

HTML : Блоки на всю высоту экрана но не больше

Ответы (2 шт):