带有固定菜单栏的响应式列

Posted 2023-03-05

【中文标题】带有固定菜单栏的响应式列

【英文标题】：Responsive columns with a fixed menu bar

【发布时间】：2014-04-11 13:52:33

【问题描述】：

我想将响应式元素与半响应式元素结合起来：

我想在顶部有一个菜单栏

height:10px;
width:100%;

并将窗口的其余部分用于 9 个响应式矩形，这些矩形将float 向左并根据窗口大小调整大小。

我知道如何定义这些响应方块，但我不知道如何定义容纳它们的容器大小。

简而言之，容器需要为100% 宽度和100% 高度减去菜单栏的10px 高度。

【参考方案1】：

为了计算容器的高度，css3有一个calc()函数。您可以将容器高度指定为

height: calc(100% - 10px);

CSS 计算浏览器支持@caniuse

---

对于不支持 calc 的浏览器，您可以有如下回退：

height: 99%;
height: calc(100% - 10px);

查看本教程：css calc

这是一个简单的fiddle

---

旁注：如果要以 % 指定高度，则应从 body 开始以 % 为父元素的高度，

html, body
 height:100%;

【讨论】：

这是我现在拥有的，它似乎不起作用。你能告诉我我做错了什么吗？ codepen.io/anon/pen/EJlDy

@user3387048 不幸的是该链接没有加载，这是一个工作小提琴：jsfiddle.net/X5MS8

我看了你的小提琴，我看到了同样的问题。内容元素，绿色框，根据里面的文本改变大小。如果没有文本，则没有绿色框。我想让绿色框总是全尺寸，即 100% - 10px，所以蓝色标题框将是 10px + (100% - 10px) = 全窗口。

@user3387048 这是同样的小提琴，没​​有内容jsfiddle.net/X5MS8/1

是的，现在根本没有绿框......这正是我不想要的。我想我无法解释自己。我想让绿色框覆盖窗口的所有其余部分，即使没有内容。

【参考方案2】：

你有两种选择，一种是css，一种是javascript：

css：（由于顶部的菜单栏是固定的，如果您使用 .container 围绕标题和下面的部分编写 html，我认为您不需要减去标题的高度）

html, body, .container 
  width: 100%;
  height: 100%;
  min-height: 100%;

js：（在这个你可以将你的容器写成在标题之外，而不是）

$(function() 
  $(window).bind("load resize", function() 
    $winHeight = $(window).height();
    $container = $('container');
    $container.height($winHeight - 10);
  );
);

【讨论】：

谢谢，这很有帮助。我还想问一件事。我想说“项目高度=容器高度* 0.33”。我怎样才能把它放在js中。

item = $container.height() * 0.33;