CSS Layout Вертикально-выравнивание Scroll Контейнер

Question

Мне интересно, как проектировать следующий макет в CSS3:

Синий контейнер должен иметь отступ 1% до
сверху, справа, снизу и слева от HTML/тела (окрашенный в черный цвет здесь).
Оранжевый контейнер должен прокручиваться.
Зеленые контейнеры должны иметь высоту в процентах, как и все другие контейнеры, тоже

.

Мой CSS код выглядит следующим образом до сих пор:

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

И это мой HTML-код относительно моего CSS выше:

<div class="containerbox"> 

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

</div> 

Answer 1

я работал над чем-то. Вы можете найти его 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. Вам просто нужно найти правильное значение для цветов.

Answer 2

Я сделал Fiddle именно этого.

HTML

<div> 
    <header> 
    </header> 
    <main> 
     Lorem ipsum 
    </main> 
    <footer> 
    </footer> 
</div> 

CSS

*,*:before,*:after{ 
    box-sizing: border-box; 
    position: relative; 
} 

html, body{ 
    height: 100%; 
} 

body{ 
    margin: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: #3F47CA; 
    border: 10px solid #000; 
} 

div{ 
    width: 98%; 
    height: 98%; 
} 

header{ 
    height: 12%; 
    background-color: #B5E51D; 
} 

main{ 
    height: calc(80% - 20px); 
    padding: 10px; 
    color: #FFF; 
    margin: 10px 0; 
    background-color: #FFC90D; 
    overflow-y: scroll; 
} 

footer{ 
    height: 8%; 
    background-color: #B5E51D; 
} 

Надеется, что это помогает

Answer 3

html{ 
    height: 100%; 
    min-height: 100%; 
} 
body{ 
    min-height: 100%; 
} 
.blue{ 
    height: 100%; 
    padding: 1%; 
} 
.green{ 
    height: 20%; /*of the screen height*/ 
} 
.orange{ 
    height: 30%; /*of the screen height*/ 
    overflow-y: scroll; /*scroll when content's height is more that container's height*/ 
}