Question

这可能已经在堆栈溢出时得到了解答，但我查看并按照找到的答案但它不起作用我想在页面底部显示 header2 标题（我想要100％高度和100％宽度）。如果我为标题设置了这些值，则 Mainheader 大于页面（需要滚动）。以下是代码：

.header {
  border: 3px solid orange;
  min-height: 100vh;
  display: -webkit-flex;
  display: flex;
  /* -webkit-box-orient: horizontal; */
  z-index: 0;
  position: relative;
  /* position: absolute; */
}
.headerMiddle {
  border: 2px solid green;
  -webkit-flex: 1;
  flex: 1;
}
.header2 {
  border: 3px solid blue;
  min-height: 10vh;
  display: -webkit-flex;
  display: flex;
  /* -webkit-box-orient: horizontal; */
}
.headerMiddle2 {
  border: 2px solid green;
  -webkit-flex: 1;
  flex: 1;
}
.Mainheader {
  border: 3px solid red;
  min-height: 100vh;
  display: -webkit-flex;
  position: relative;
  flex-direction: column;
  display: flex;
}

<body>
  <div class="Mainheader">
    <div class="header">
      <div class="headerMiddle"></div>
    </div>
    <div class="header2">
      <div class="headerMiddle2">Option 1</div>
      <div class="headerMiddle2">Option 2</div>
    </div>
  </div>


</body>

JSbin here上的代码片段。

Answer 1

以下是我在代码中更改内容的要点：

将margin: 0添加到body以删除默认边距
box-sizing: border-box指向高度和宽度不超过窗口的所有元素（如果要显示所有边框，可能需要考虑使用calc）
在fixed和header添加header2职位，根据要求定位。

以下片段：

＆＃13;

body{
  margin: 0;
  }
*{
  box-sizing: border-box;
  }
.header {
    border: 3px solid orange;
    min-height: 100vh;
    display: -webkit-flex;
    display: flex;
    /* -webkit-box-orient: horizontal; */
    z-index: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    /* position: absolute; */
}


.headerMiddle {
    border: 2px solid green;
    -webkit-flex: 1;
    flex: 1;
}

.header2 {
    border: 3px solid blue;
    min-height: 10vh;
    display: -webkit-flex;
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    /* -webkit-box-orient: horizontal; */
}
.headerMiddle2 {
    border: 2px solid green;
    -webkit-flex: 1;
    flex: 1;
}
.Mainheader {
    border: 3px solid red;
    min-height: 100vh;
    display: -webkit-flex;
    position:relative;
    flex-direction:column;
    display: flex;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="Mainheader">
  <div class="header">
    <div class="headerMiddle"></div>
  </div>
   <div class="header2">
      <div class="headerMiddle2">Option 1</div>
      <div class="headerMiddle2">Option 2</div>
  </div>
</div>


</body>
</html>

＆＃13;

让我知道您对此的反馈。谢谢！

如何将固定位置的柔性容器覆盖在另一个柔性容器上？

1 个答案: