Question

我的网站有两种页面：

没有页面滚动，孩子们可以滚动（https://codepen.io/Zephir77167/pen/mzymwO?editors=1100）
页面滚动，孩子不处理滚动（https://codepen.io/Zephir77167/pen/ePmWja?editors=1100）

第一个示例因以下CSS而起作用：

.root {
  height: 100%;
  /* min-height: 100%; */
}

第二个示例由于此CSS而起作用：

.root {
  /* height: 100%; */
  min-height: 100%;
}

除.root类外，代码完全相同。我想两种布局都使用相同的.root代码。

这是我最初的解决方法：https://codepen.io/Zephir77167/pen/BqyMxw?editors=1100

.columns {
  height: calc(100vh - 120px);
}

但是vh在Chrome Android和Safari iOS上无法正常运行。

一些限制：

不能使用vh
不能使用javascript
html，body，.root，.layout，.content CSS两种布局均应相同，并且都应像以前一样工作

在此先感谢您的帮助！

Answer 1

  if @packages_m.include?(package)
    render partial: 'package', locals: { package: package, mss: true }
  elsif @availables.include?(package)
     render partial: 'package', locals: { package: package, mss: false }
  else
  end

  if mss
    package.typounit.stars
  else
    package.product_category

html,
body {
  margin: 0;
  height: 100%;
}

.root {
  height: 100%;
}

.layout {
  height: 100%;
}

.navbar {
  height: 60px;
  background-color: blue;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.navbar-space {
  height: 60px;
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  padding: 30px;
  background-color: grey;
}

.columns {
  display: flex;
}

.gap {
  width: 20px;
  background-color: pink;
}

.left-column,
.right-column {
  flex: 1 1;
  flex-direction: column;
  background-color: red;
}

.header,
.footer {
  text-align: center;
  padding: 10px;
}

.non-scrollable {
  overflow-y: initial;
}

请注意：请勿尝试在每个元素中使用display：flex。仅在父母中就足够了。否则会引起混乱。

具有固定和非固定高度页面的Flex布局

1 个答案: