Позиция header, footer и aside?

Код css, который у меня есть, - следующий

header {
        width: 100%;
        height: 60px;
        background-color: #141616;
        z-index: 0;
        border-bottom: 1px solid #383838;
        color: #FFFFFF !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    body {
        margin: 0;
        background-color: #1E2222;
        z-index: 0;
        height: auto;
        width: 100%;
    }
    aside#left {
        width: 215px;
        background-color: #141616;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 999;
        border: 1px solid #383838;
        color: #FFFFFF !important;
    }
    footer {
        height: 42px;
        position: fixed;
        bottom: 0;
        background-color: #141616;
        z-index: 1;
        color: #FFFFFF !important;
        width: 100%;
        text-align: center;
    }
    main{
        margin-left: 217px;
        margin-top: 61px;
    }

и мой html

<body>
<header></header>
<aside id="left">
    <img src="logo.png">
</aside>
<main style="background-color: red;">
asdf
</main>
<footer>Carinae Gaming</footer>
</body>

я ищу способ, в котором он представляется как следующая фигура:

В этом случае sería body: какие свойства я должен добавлять?

1
задан 13.02.2017, 02:39
0 ответов

Идеально подходит для использования Flexbox, без ограничений.

HTML

<body>
   <header>Header</header>
   <div class="container">
     <aside>Aside</aside>
     <section class="body">Body</section>  
   </div>
   <footer>Footer</footer>
</body>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

body > * {
  width: 100%;
  border: 1px solid #000;
  border-bottom-width: 0;
  box-sizing: border-box;
  text-align: center;
}

body > *:last-child {
  border-bottom-width: 1px;
}

header,
footer {
  min-height: 100px;
}

aside {
  width: 25%;
  border: 0 solid #000;
  border-right-width: 1px;
}

.container .body {
  width: 75%;
}

.container {
  display: flex;
  min-height: 300px;
}
0
ответ дан 03.12.2019, 17:06