我想将响应元素与半响应元素结合起来:
我希望顶部有一个菜单栏
height:10px;
width:100%;
使用窗口的其余部分显示9个响应式矩形,float
将根据窗口大小离开并调整大小。
我知道如何定义这些响应方块,但我无法弄清楚如何定义容纳它们的容器大小。
简而言之,容器需要100%
宽度和100%
高度减去菜单栏的10px
高度。
答案 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);
});
});