在带 Flex 或 w3.css 的小屏幕上，全高侧边导航栏移动到主要 div 下方

Question

在不使用固定元素的情况下，如何使用 flex-box 或 w3.css 使附加布局适用于桌面和移动设备？左侧的矩形代表桌面布局，右侧的矩形代表它在移动设备或更窄的媒体上的外观。（没有java）

页眉、页脚和侧边栏将是粘性的或具有类似固定元素的特性，但不会固定。我也对浮动解决方案感兴趣，但他们没有就像 flexbox 一样优雅。也有兴趣听听 bootstrap 是否可以更优雅地解决这个问题。

这是我目前得到的，但是侧面 nav/bar 不是全高。

body * {
  border: 1px solid black;
}

.flex-container {
  display: -ms-flexbox;
  /* IE10*/
  display: flex;
  -ms-flex-wrap: wrap;
  /*IE10*/
  flex-wrap: wrap;
  padding: 0 15px;
}

.header {
  -ms-flex: 100%;
  /*IE10*/
  flex: 100%;
  height: 70px;
  position: sticky;
  top: 0;
  z-index: +1;
  background-color: rgba(255, 255, 255, 1.00);
}

.aside {
  -ms-flex: 20;
  /*IE10*/
  flex: 20;
  height: 100%;
  position: sticky;
  top: 70px;
  padding: 0 40px 0 0;
}

.main {
  -ms-flex: 80;
  /*IE10*/
  flex: 80;
}

.footer {
  -ms-flex: 100%;
  /*IE10*/
  flex: 100%;
  position: sticky;
  bottom: 0;
  padding: 0 0 5px 0;
  background-color: rgba(255, 255, 255, 1.00);
}

.post {
  display: -ms-flexbox;
  /* IE10*/
  display: flex;
  -ms-flex-wrap: wrap;
  /*IE10*/
  flex-wrap: wrap;
  height: 500px;
  gap: 40px;
}

.post__story {
  -ms-flex: 3;
  /*IE10*/
  flex: 3;
}

.post__slider {
  -ms-flex: 7;
  /*IE10*/
  flex: 7;
}

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
  .post {
    flex-direction: column;
  }
  .header {
    order: 1;
  }
  .main {
    order: 2;
  }
  .aside {
    order: 3;
  }
  .footer {
    order: 4;
  }
  .navTop,
  .navBottom {
    width: 100%;
  }
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>skeletal</title>
</head>

<body>
  <div class="flex-container">
    <header class="header"> header content </header>
    <aside class="aside"> side bar/nav content
      <div class="asideLeft__container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, enim aliquid hic!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quidem pariatur, magnam.</p>
        <address class="asideLeft__contact">
        <p>Email</p> <br>
        <p>Twitter</p> <br>
        <p>Github</p>
      </address>
      </div>
    </aside>
    <main class="main">main content
      <section class="post">
        <article class="post__story"> Content for class "post__story" Goes Here
          <p>Content for project story Goes Here</p>
        </article>
        <div class="post__slider"> Content for class "post__slider" Goes Here
          <figure>This is the container for project image
            <figcaption>This is the container for image caption</figcaption>
          </figure>
        </div>
      </section>
      <section class="post">
        <article class="post__story"> Content for class "post__story" Goes Here
          <p>Content for project story Goes Here</p>
        </article>
        <div class="post__slider"> Content for class "post__slider" Goes Here
          <figure>This is the container for project image
            <figcaption>This is the container for image caption</figcaption>
          </figure>
        </div>
      </section>
      <section class="post">
        <article class="post__story"> Content for class "post__story" Goes Here
          <p>Content for project story Goes Here</p>
        </article>
        <div class="post__slider"> Content for class "post__slider" Goes Here
          <figure>This is the container for project image
            <figcaption>This is the container for image caption</figcaption>
          </figure>
        </div>
      </section>
    </main>
    <footer class="footer"> footer content </footer>
  </div>
</body>

</html>

Answer 1

在尝试使用 flex 一段时间后，我发现通过此页面 (CSS tricks)，在这种情况下使用网格更容易。因此，基于该示例，这是实现它的一种方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>The "grid"  alternative</title>
    
<style> 
.header {
  grid-area: header;
  background-color: hotpink;
  position: sticky;
  top:0;
}

.footer {
  grid-area: footer;
  background-color: deepskyblue;
  position: sticky;
  bottom: 0;
  height: 50px;
}

.sidebar {
  grid-area: sidebar;
  background-color: gold;
}

.main {
  grid-area: main;
  background-color:tomato;
}


.grid {
  font-size: 30px;
  text-align: center;
  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-areas: "sidebar header"
                       "sidebar main"
                       "sidebar footer";
 }
@media (max-width: 800px) {
    .grid{
    grid-template-columns: 100%;
    grid-template-areas: "header"
                         "main"
                         "sidebar"
                         "footer";
 }
 .sidebar { position:sticky;
            bottom:50px; 
 
}
</style>    
</head> 
<body>
<div class="grid">
  <div class="header">Header</div>
  <div class="main">Main
  <p>Post emensos insuperabilis expeditionis eventus languentibus partium animis, 
        quas periculorum varietas fregerat et laborum, nondum tubarum cessante clangore 
        vel milite locato per stationes hibernas, fortunae saevientis procellae tempestates 
        alias rebus infudere communibus per multa illa et dira facinora Caesaris Galli, qui 
        ex squalore imo miseriarum in aetatis adultae primitiis ad principale culmen insperato 
        saltu provectus ultra terminos potestatis delatae procurrens asperitate nimia cuncta
        foedabat. Propinquitate enim regiae stirpis gentilitateque etiam tum Constantini 
        nominis efferebatur in fastus, si plus valuisset, ausurus hostilia in auctorem suae 
        felicitatis, ut videbatur. 2 Cuius acerbitati uxor grave accesserat incentivum, germanitate 
        Augusti turgida supra modum, quam Hannibaliano regi fratris filio antehac Constantinus 
        iunxerat pater, Megaera quaedam mortalis, inflammatrix saevientis adsidua, humani cruoris 
        avida nihil mitius quam maritus; qui paulatim eruditiores facti processu temporis ad nocendum
        per clandestinos versutosque rumigerulos conpertis leviter addere quaedam male suetos falsa et
         placentia sibi discentes, adfectati regni vel artium nefandarum calumnias insontibus adfligebant.
        Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda 
        Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum,
         flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta,
          oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis f
          ormula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui 
          permissus occideretur
    </p></div>
  <div class="sidebar"> Sidebar</div>
   <div class="footer">Footer</div>
</div>
</body>
</html>

希望对您有所帮助。萨鲁多斯。

在带 Flex 或 w3.css 的小屏幕上，全高侧边导航栏移动到主要 div 下方

Full Height Side Nav Bar moves below main div on small screens w/ Flex or w3.css

html

layout

flexbox

skeleton-css-boilerplate

w3.css