Здравствуйте! Как сделать высоту вложенного блока 100% от высоты родителя, если у родителя задана min-height, но не задана height? в приведенном ниже коде тег main надо растянуть до футера, при том чтобы от перегрузки контентом блок не вылазил за футер снизу. онлайн пример: https://jsfiddle.net/pq9x7gjv/
UPD: при задании фиксированной высоты появляется проблема напозлания футера на main, пример тут: https://jsfiddle.net/mk0g8gk8/
HTML:
<body>
<div class="wrapper">
<header>
header
</header>
<main class="data">
data
</main>
<footer>
footer
</footer>
</div>
</body>
CCS:
html, body {
width: 795px;
height: 100%;
margin: 0 auto;
}
.wrapper {
min-height: 100%;
position: relative;
background-color: #d7ffd4;
border: 1px solid gray;
}
header {
height: 50px;
width: 100%;
background-color: pink;
}
.data {
height: 100%;
background-color: blue;
border: 1px solid black;
}
.wrap {
height: 100%;
background-color: #7892ff;
}
footer {
width: 795px;
height: 50px;
position: absolute;
bottom: 0;
background-color: yellow;
border: 1px solid green;
}