css - 动态设置div宽度和高度的方法

Question

场景 1:
顶部标题宽度为 100%，高度为 50 像素。
左侧导航栏宽度为 200 像素，高度为动态填充屏幕。

body{
    padding: 0;
    margin: 0;
}

.header{
    width: 100%;
    height: 50px;
}

.navBar{
    position: absolute;
    top: 50px;
    bottom: 0;
}

场景 2:
顶部标题宽度为 100%，高度为 50 像素。
左侧导航栏宽度为 200px，高度为动态填充屏幕。
导航栏右侧和标题下方的容器，具有动态宽度和高度以填充屏幕。

.container{
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 200px;
    right: 0;
}

这会起作用，但我知道这不是实现它的最佳方法。一些建议？非常感谢!

Answer 1

您必须将 height:100% 添加到 html 和 body 标签。 然后对 height 和 width 属性使用 calc() css 函数来获得结果。

请参阅我的片段以了解这两个场景。它的工作。

html, body{ height:100%;}
header{ width:100%; height:50px;background:#777;}
.nav{ height: calc( 100% - 50px ); width:200px; float:left; background:#888;}
.container{ color:#fff; float:left; width:calc( 100% - 200px ); height:calc( 100% - 50px ); background:#222;}

<header>HEADER</header>  
<div class="nav">NAV</div>
<div class="container">Container</div>