个人中心
gpt4 book ai didi

html - 关闭 Canvas 菜单不会在 Canvas 下滑动

转载 作者：行者123 更新时间：2023-11-28 07:49:35 25 4
gpt4 key购买 nike

我在做什么

我正在尝试创建一个 Holy Grail Layout (页眉、页脚、导航边栏、 Canvas )在 Web 应用程序中使用 Flexbox。虽然我的没有右边的侧边栏(只是要注意)。

想要的效果

当布局被挤压到移动设备中时，响应式调整将是侧面导航面板应滑到 Canvas 后面，并可通过页眉中的汉堡菜单访问。

Here是类似的效果示例，尽管我的页眉不会随之滑动。

遇到的问题

我目前还没有添加汉堡包滑动 - 我首先尝试让导航面板在布局宽度被压缩到 460 像素以下时在 Canvas 下方滑动。 然而相反，它似乎会滑过(甚至失去高度)。

这是我失败的演示 here

HTML

<head>
    <meta charset="utf-8">
    <title>My Flexbox 01</title>
    <meta name="description" content="My Flexbox">
    <meta name="keywords" content="fex, box">
    <link rel='stylesheet' href='myCSS.css'/>

</head>
<body>

<div class="flexbox-parent">
    <header class="header">Header</header>
    <div class="flex-main-container">
          <div class="navigation">Navigation</div>      
      <div class="canvas">Canvas</div>
    </div>
    <footer class="footer">Footer</footer>
</div>
 <script src="scripts/myJS.js"></script>

</body>

CSS

html, body {
    width: 100%;
    height: 100%;   
}

body {
    margin: 0;
    padding: 0;
    background: pink;
}

.flexbox-parent
{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.header {
    height: 50px;
    /*margin: -30px -30px 30px -30px;*/
    border: 1px solid hotpink;
    border-radius: 7px;
    background: hotpink;
}

.flex-main-container {
    display: flex;
    flex: 1;
    justify-content: space-between;
    flex-direction: row;
    border: 1px solid red;
}

.canvas {
    flex: 1;
    border: 1px solid DeepSkyBlue;
    border-radius: 7px;
    background: DeepSkyBlue;
}

.navigation {
    flex: 0 0 12em;
    border: 1px solid yellow;
    border-radius: 7px;
    background: yellow;
}

.footer {
    height: 50px;
    /*margin: -30px -30px 30px -30px;*/
    border: 1px solid aliceblue;
    border-radius: 7px;
    background: aliceblue;
}

@media (max-width: 460px) {

  .navigation{
   position:absolute;
   width:12em;

  }





}

我现在一直在为这个问题苦苦挣扎，我真的需要帮助。提前感谢任何想法或解决方案!

最佳答案

您不需要媒体查询:只需使用 flexbox 魔法!

首先，由于 Canvas 似乎是页面的主要内容，因此在 HTML 中它应该首先出现。

<div class="canvas">Canvas</div>
<div class="navigation">Navigation</div>

如果您不想更改 HTML，可以使用 order。

然后，使用多行反向行流:

.flex-main-container {
  flex-flow: row-reverse wrap;
}

因为它是颠倒的，所以导航会出现在 Canvas 的左侧，如您所愿。

最后，在 Canvas 上添加一些min-width:

.canvas {
  min-width: 300px;
}

如果屏幕不够宽，导航将移至下一行。

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: pink;
}
.flexbox-parent {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.header {
  height: 50px;
  /*margin: -30px -30px 30px -30px;*/
  border: 1px solid hotpink;
  border-radius: 7px;
  background: hotpink;
}
.flex-main-container {
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-flow: row-reverse wrap;
  border: 1px solid red;
}
.canvas {
  flex: 1;
  min-width: 300px;
  border: 1px solid DeepSkyBlue;
  border-radius: 7px;
  background: DeepSkyBlue;
}
.navigation {
  flex: 0 0 12em;
  border: 1px solid yellow;
  border-radius: 7px;
  background: yellow;
}
.footer {
  height: 50px;
  /*margin: -30px -30px 30px -30px;*/
  border: 1px solid aliceblue;
  border-radius: 7px;
  background: aliceblue;
}
<div class="flexbox-parent">
  <header class="header">Header</header>
  <div class="flex-main-container">
    <div class="canvas">Canvas</div>
    <div class="navigation">Navigation</div>
  </div>
  <footer class="footer">Footer</footer>
</div>

关于html - 关闭 Canvas 菜单不会在 Canvas 下滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30496042/

25 4 0
文章推荐： javascript - 禁止代码某些部分的ajax调用
文章推荐： javascript - 谷歌地方搜索方法不一致
文章推荐： javascript - 如何使用 new Person(name,description) 访问变量？
文章推荐： javascript - Bootstrap 导航中的目标 'toggle' 链接