Блог

Эй, ребята, у меня проблема с моим макетом.

Если я вставляю большое изображение или большую таблицу из базы данных, область содержимого не растягивается ни на верхний, ни на нижний колонтитулы.

Я хотел бы сделать оболочку основной точкой измерения и сделать так, чтобы каждый основной элемент (в данном случае верхний и нижний колонтитулы) соответствовал его ширине.

Я знаю, что это может быть очень простое решение, и я много чего перепробовал, но пока ничего не получалось.

Любая помощь приветствуется.

ps.: Я знаю, что {img max-width: 100%; } — это одно из решений, но я хочу решить здесь основную проблему.

Вот мой базовый макет flexbox:

HTML

 <div class="wrapper">
<header>Header</header>
<div class="nav-container">Nav</div>
<div class="main">
  <div class="aside-1">Aside-1</div>
  <div class="content">Content</div>
  <div class="aside-2">Aside-2</div>
</div>
<footer>Footer</footer>
</div>
 

CSS

 html {
  height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  background: url(../images/template/bg.jpg) no-repeat center center fixed;
  background-size: cover;
}
body {min-height: 100vh; min-width: 600px; max-width: 1400px; width: 95vw; margin-left: auto; margin-right: auto; margin-top: 20px; }
header {min-height: 200px; }
.wrapper {display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; }
.main    {display: -ms-flexbox; display: flex; }
.aside-1 {-ms-flex: 0 0 100px; flex: 0 0 200px; }
.content {-ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 100vh; text-align: justify; }
.aside-2 {-ms-flex: 0 0 100px; flex: 0 0 200px; }
footer {display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; background: #333; height: 45px; padding: 0; margin: 0; }

* {box-sizing: border-box; }
/* img {max-width: 100%; } */


  /* MEDIA
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 800px) {
  .main    {-ms-flex-direction: column; flex-direction: column; }
  .aside-1 {-ms-flex-order: 1; order: 1; }
  .content {-ms-flex-order: 2; order: 2; }
  .aside-2 {-ms-flex-order: 3; order: 3; }
}


  /* DEV
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wrapper, .main, .aside-1, .content, .aside-2, footer {border: 1px solid #F67600;}
 

Ну, у меня это работает. Можете ли вы привести пример, что для вас не так?

 html, body{
  height: 100vh;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}
html {
    background: url(http://digitalartanddesign.org/assets/illustrator/images/abstract-background-example.png) no-repeat center center fixed;
    background-size: cover;
}
body {
    min-width: 600px;
    max-width: 1400px;
    width: 95vw;
    margin: auto;
    margin-top: 20px;
}
header {
    min-height: 200px;
}
.wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}
.main {
    display: -ms-flexbox;
    display: flex;
}
.aside-1 {
    -ms-flex: 0 0 100px;
    flex: 0 0 200px;
}
.content {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 100vh;
    text-align: justify;
}
.aside-2 {
    -ms-flex: 0 0 100px;
    flex: 0 0 200px;
}
footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    background: #333;
    height: 45px;
    padding: 0;
    margin: 0;
    height: 100px;
}
* {
    box-sizing: border-box;
}
img {
    max-width: 100%;
}
.wrapper,
.main,
.aside-1,
.content,
.aside-2,
footer {
    border: 1px solid #F67600;
} 

 <div class="wrapper">
<header>Header
<img src="https://newevolutiondesigns.com/images/freebies/colorful-background-35.jpg" alt=""></header>
<div class="nav-container">Nav</div>
<div class="main">
  <div class="aside-1">Aside-1</div>
  <div class="content">Content</div>
  <div class="aside-2">Aside-2</div>
</div>
<footer>Footer</footer>
</div>