Question

我想使用Bootstrap创建html代码。但我有一个问题。我不根据浏览器高度调整div的高度。我尝试了我所知道的一切。

如何调整div的浏览器高度？

这是我的代码：

body{
    height: 100%;
    width: 100%;
}
#leftMenu{
    height: 500px;
}

#viewport{
    height: 400px;
    overflow: hidden;
}

#informationMenu{
    height: 100px;
    overflow: scroll;
}

#rightMenu{
    height: 500px;
}

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="leftMenu" style="background-color: #cc0052" >
            </div>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                <div class="row" id="viewport" style="background-color: aquamarine">
                </div>
                <div class="row" id="informationMenu" style="background-color: cadetblue">
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="rightMenu" style="background-color: #bfff00">
            </div>
        </div>
    </div>
</body>

Answer 1

您应该使用vh作为身高。它还具有响应式设计。 1hv =视口高度的1％（broswer），这意味着100vh将是您需要的值;）

修改：如果您尝试对宽度执行相同操作，则需要使用vw代替vh，因为vh指的是高度，vw指的是到宽度;）

根据浏览器高度设置div的高度

1 个答案: