HTML 3 строки макет с верхнего и нижнего колонтитула 100%

Question

There is my Layout

html, 
 
body { 
 
    background-color: #000000; 
 
    color: #F9FFCF; 
 
} 
 
#right { 
 
    float: right; 
 
    background-color: #00FFD3; 
 
} 
 
#nav { 
 
    display: inline-block; 
 
    float: left; 
 
    background-color: #FF0004; 
 
} 
 
#nav ul { 
 
    list-style-type: none; 
 
} 
 
#main { 
 
    display: inline-block; 
 
    float: left; 
 
    background-color: #2200FF; 
 
} 
 
#footer { 
 
    clear: both; 
 
} 
 
#content { 
 
    width: 90%; 
 
    display: table; 
 
    margin: 0 auto; 
 
}

<header></header> 
 
<div id="content"> 
 
    <nav id="nav"></nav> 
 
    <main id="main"></main> 
 
    <div id="right"></div> 
 
    <footer id="footer"></footer> 
 
</div>

Я будет иметь цвет фона в нав, по содержанию и справа, а высота всех div должны быть в нижнем колонтитуле. Как это возможно?

Answer 1

Попробуйте это. Вы получите макет

* { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    background-color: #000000; 
 
    color: #F9FFCF; 
 
} 
 

 
header{ 
 
    background-color:lightgreen; 
 
    height: 20px; 
 
} 
 
#right { 
 
    float: right; 
 
    width: 20%; 
 
    background-color: #00FFD3; 
 
    height: 100px; // Used to show the layout 
 
} 
 
#nav { 
 
    background-color: lightpink; 
 
    float: left; 
 
    width: 20%; 
 
    height: 100px; // Used to show the layout 
 
} 
 
#main { 
 
    float: left; 
 
    width: 60%; 
 
    background-color: #2200FF; 
 
    height: 100px; // Used to show the layout 
 
} 
 
#content { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 
#footer { 
 
    clear: both; 
 
    width: 100%; 
 
    position: relative; 
 
    background-color: red; 
 
    height: 20px; // Used to show the layout 
 
}

<header></header> 
 

 
<div id="content"> 
 
    <nav id="nav">  </nav> 
 
    <main id="main">  </main> 
 
    <div id="right">  </div> 
 
    <footer id="footer"> </footer> 
 
</div>

Answer 2

Это это, его работы хорошо, надеюсь, что это позволит решить проблему.

<div id="content"> 
    <nav id="nav">test nav</nav> 
    <main id="main">main </main> 
    <div id="right">right</div> 
    <footer id="footer">footer</footer> 
</div> 

<style> 
html, 
body { 
    background-color: #000000; 
    color: #F9FFCF; 
    height:100%; 
    min-height:100%; 
} 
#right { 
    float: right; 
    background-color: #00FFD3; 
    height:100%; 
width:20%; 
} 
#nav { 
    display: inline-block; 
    float: left; 
    background-color: #FF0004; 
    height:100%; 
width:20%; 
} 
#nav ul { 
    list-style-type: none; 
} 
#main { 
    display: inline-block; 
    float: left; 
    background-color: #2200FF; 
    height:100%; 
width:50%; 
} 
#footer { 
    clear: both; 
} 
#content { 
    width: 90%; 
    margin: 0 auto; 
    height:100%; 
} 
</style>