udgru udgru - 9 days ago 5
CSS Question

CSS Layout Vertical-Aligned Scroll Container

I am wondering how to design the following layout in CSS3:



The blue container should have a padding of 1% to

top, right, bottom and left of html/body (painted black here).

The orange container shall be scrollable.

The green containers shall have a height in percentage like all other containers, too

.
enter image description here



My CSS code looks like this so far:

<style>
.html,body {
width: 100%;
height: 100%;
}

.containerbox {
width: 98%;
height: 98%;
paddding: 1% 1% 1% 1%; // not working yet
// todo: horizontal alignment
// todo: vertical alignment
}

.header {
width: 100%;
height: 35%%;
}
.content {
width: 100%;
height: 50%;
}
.footer {
width: 100%;
height: 15%%;
}
</style>




And this is my html code regarding my CSS above:

<div class="containerbox">

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

</div>

Answer

I've worked on something. You can find it here.

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

.blue-container{
    height: 100%;
    background-color: aqua;
    padding: 1%;
    box-sizing: border-box;
}

.green{
    background-color: green;
}
    
.green.big{
    height: 15%;
}
    
.green.small{
    height: 10%;
}
    
.orange{
    height: 72%;
    overflow-y: scroll;
    background-color: orange;
    margin: 1% 0;
}
<div class="blue-container">
    <div class="green big"></div>
    <div class="orange"></div>
    <div class="green small"></div>
</div>

P.S. You just have to find the right value for the colors.