Question

场景1：
顶部标题，宽度为100％，高度为50px。
左侧导航栏，宽度为200px，动态高度可以填满屏幕。

body{
    padding: 0;
    margin: 0;
}

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

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

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

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

这将有效，但我知道这不是实现这一目标的最佳方式。一些建议？很多人！

Answer 1

我认为this是你想要的。正如我在下面创建的那样创建侧面菜单和容器的布局，也检查小提琴。这是您的方案的示例

html, body{
height:100%;
min-height:100%;
}
body{
    position:relative;
    margin:0px;
}

header{
    position:relative;
    height:50px;
    background:#f00;
}
aside{
    position:absolute;
    top:50px;
    border-right:2px solid #ccc;
    left:0;
    width:20%;
    bottom:0;
    padding-top:50px;
    height:100%;
    backgroud:#f2f2f2;
    overflow-y:auto;
    overflow-x:hidden;
}
section.container{
    margin-left:20%;
    position:relative;
    width:80%;
    float:left;
    background:#f5f5f5;
}

HTML like

  <header></header>
    <aside>sidemenu</aside>
    <section class="container">
        container
    </section>

Answer 2

您必须将身高：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>

如何动态设置div宽度和高度

2 个答案: