具有固定菜单栏的响应列

时间:2014-03-08 07:52:27

标签: html css

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

我希望顶部有一个菜单栏

height:10px;
width:100%;

使用窗口的其余部分显示9个响应式矩形float将根据窗口大小离开并调整大小。

我知道如何定义这些响应方块,但我无法弄清楚如何定义容纳它们的容器大小。

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

2 个答案:

答案 0 :(得分:0)

为了计算容器的高度,css3具有calc()功能。您可以将容器高度指定为

height: calc(100% - 10px);

CSS calc broswer support @ caniuse


您可以对不支持calc的浏览器进行回退,如下所示:

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

查看本教程:css calc

这是一个简单的fiddle


旁注:如果要以%为单位指定高度,则应从父体开始,以%为单位给出父元素高度,

html, body{
 height:100%;
}

答案 1 :(得分:0)

您有两个选项,一个是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);
  });
});