Question

我可能没有看到愚蠢的东西。但我无法想出这个。

我有这个着陆，在两根柱子上有一个粘性页脚和一个柔性盒包装，使它们粘在包装盒的底部，并在你调整大小以使屏幕变大时保持在底部。

问题是，当我使屏幕变小时，即使他们的包装器在导航div之后开始，列也会在导航div下面。

我想要的是当用户调整到较小尺寸的屏幕时，列不会进入导航div。相反，浏览器会自动添加y滚动。

这是结构：

.main_wrapper{
  float: left;
  width: 100%;
  border:1px solid red;
}

.content_wrapper{
  float: left;
  width: 100%;
  height:calc(100vh - 60px);
  background:black;
}

footer{
  float: left;
  width: 100%;
  background:#4096ee;
  height:60px;
  text-align:center;
  color:#fff;
}

nav{
  float: left;
  width: 100%;
  background:yellow;
  color:#000;
  text-align:center;
  height:60px;
  opacity:0.8;
}

.landing_content{
  float: left;
  width: 100%;
  background:green;
  height:100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row; 
  flex-direction: row;
  -webkit-align-items: flex-start;
  align-items: flex-end;
}

.col1{
  float:left;
  width:36%;
  background-color:red;
  color:#fff;
  height: 400px;
}

.col2{
    float: left;
    width: 64%;
    height: 400px;
    background-color:blue;
    color:#fff;
}

<body>
  <div class="main_wrapper">
    <div class="content_wrapper">
      <nav>
        A navigation
      </nav>
      <div class="landing_content">
        <div class="col1">
          A content column
        </div>
        <div class="col2">
          Second content column
        </div>
      </div>
    </div>
    <footer>
      A footer
    </footer>
  </div>
</body>

这是codepen：

https://codepen.io/Luciellav/pen/mWrzOz/

Thanx很多。

Answer 1

只需将.landing_content min-height与内容列相同：

.landing_content {
  ...
  min-height: 400px;
}

Answer 2

正如@caisah所说。如果.landing_content和.content_wrapper同时获得列的min-height，则此方法有效：

＆＃13;

.content_wrapper{
  float: left;
  width: 100%;
  height:calc(100vh - 60px);
  background:black;
  min-height:400px;
}

.landing_content{
  float: left;
  width: 100%;
  background:green;
  height:100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row; 
  flex-direction: row;
  -webkit-align-items: flex-start;
  align-items: flex-end;
  min-height:400px;
}

＆＃13;

使用相同的codepen：

https://codepen.io/Luciellav/pen/mWrzOz

Flex-box项目位于上部div

2 个答案: