Question

我正在使用flexbox为Web应用程序创建基本布局。我希望在顶部有一个菜单，在其下方，左侧是主要内容区域，右侧是次要内容区域，两者均垂直填充菜单下方剩余的空间。如果HTML仅包含内容区域，则拉伸范围将覆盖所有内容。但是，当我包含菜单时，最终在菜单和内容区域之间会有很多空白。

在JS小提琴中，当您单击任一链接时，我添加了一些JavaScript来删除菜单，以便更好地了解菜单和两个内容之间有多少空白（1rem）。区域。

使用flex可以实现吗？谢谢！

$(document).ready(function() {
  $("a").click(function() {
    $(this).closest(".main-menu").remove();
  })
})

html {
  height: 100%;
}

body {
  display: flex;
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
  align-content: stretch;
}

.main-menu {
  width: 90%;
  margin: 1rem calc(5% - 1px) 1rem calc(5% - 1px);
  padding: 1rem;
  border: 1px dashed black;
  align-self: flex-start;
}

.main-menu ul {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline;
}

.main-menu ul li {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline;
}

.primary-stuff {
  margin: 1rem 1rem 1rem calc(5% - 1px);
  width: calc(75% - 1rem - 1px);
  border: 1px dashed black;
}

.secondary-stuff {
  margin: 1rem calc(5% - 1px) 1rem 1rem;
  width: calc(15% - 1rem - 1px);
  border: 1px dashed black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-menu">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
  </ul>
</div>
<div class="primary-stuff"></div>
<div class="secondary-stuff"> </div>

<div style="position:absolute;background:#FFC; width: calc(5% - 1px); height: 100%; left: 0;"></div>

<div style="position:absolute;background:#FFC; width: calc(5% - 1px); height: 100%; right: 0; top: 0;"></div>

<div style="position:absolute;background:#FFC; height: 1rem; width: 100%; right: 0; top: 0;"></div>

<div style="position:absolute;background:#FFC; height: 1rem; width: 100%; right: 0; bottom: 0;"></div>

提琴：

https://jsfiddle.net/don01001100/kdg04ubr/

Answer 1

您可能会发现Grid Layout更适合这种类型的布局，因为它提供了一种更清洁的方法来按所需方式排列元素，而无需其他HTML标记。

您可以使用CSS网格实现所需的布局，如下所示：

html {
  height: 100%;
}

body {
  
  /* Cause grid to fill vertical space */
  height:100%;
  
  /* Prevent overflow due to padding */
  box-sizing:border-box;
   
  /* Use grid display type */
  display: grid;

  /* Tells grid to cause second row to fill 
     avaible/remaining vertical space */
  grid-template-rows: auto 1fr;

  /* Define the grid layout, in terms of areas
     that are distributed between 3 colums and
     2 rows */
  grid-template-areas: 
    "menu menu menu" 
    "primary primary secondary";
  
  /* Specify spacing between grid elements */
  grid-gap: 1rem;
  
  margin: 0;
  padding: 1rem;
  background:grey;
}

.main-menu {
  background: pink;
  
  /* Accociate the main-menu with the menu area
     of your grid-template-areas defined above */
  grid-area: menu;
}

.main-menu ul {
  margin: 0;
  padding: 0;
  display: inline;
}

.main-menu ul li {
  margin: 0;
  padding: 0;
  display: inline;
}

.primary-stuff {
  background: lightblue;
  /* Accociate the primary-stuff with the primary area
     of your grid-template-areas defined above */
  grid-area: primary;
}

.secondary-stuff {
  background: lightgreen;
  /* Accociate the secondary-stuff with the secondary area
     of your grid-template-areas defined above */
  grid-area: secondary;
}

<div class="main-menu">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
  </ul>
</div>
<div class="primary-stuff">
  primary content
</div>
<div class="secondary-stuff">
  secondary content
</div>

Flexbox拉伸不足

1 个答案: