相关疑难解决方法(0)

如何使div 100%的浏览器窗口高度？

我有一个有两列的布局 - 左边div和右边div.

右边div有灰色background-color,我需要它根据用户浏览器窗口的高度垂直展开.现在是background-color最后一段内容的结尾div.

我试过了height:100%,min-height:100%;等等

html css height

mik*_*ike

2019 07-09

2016
推荐指数

33
解决办法

186万
查看次数

为什么百分比高度不适用于我的div？

我有两个高度为90%的div,但显示效果不同.

我试图在它们周围放置一个外部div,但这没有帮助.此外,它在Firefox,Chrome,Opera和Safari上也是如此.

有人能解释我为什么会遇到这个问题吗？

以下是我的代码:

<div style="height: 90%">
    <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

html css

vic*_*tor

2019 10-23

48
推荐指数

2
解决办法

5万
查看次数

Flex-grow 不适用于列方向

我正在尝试学习 flexbox 布局。我看到一个教程谈到了 flex-grow 和 flex-shrink 类，并且本课程中提供的所有示例都适用于 flex-direction: row。

我尝试将它们应用到flex-direction: column，但它不能如我所愿。我用谷歌搜索了它，但是当方向设置为一列时，我没有找到合适的答案来增长弹性项目。

我的代码如下。任何人都可以修复我的 CSS 以在列方向上进行 flex-grow/shrink 工作吗？

html,
body {
    padding: 0;
    margin: 0;
    font-family: arial, sans-serif;
}

.flex-container {
    display: flex;
    border:solid 4px #000;
    flex-direction: column;
    height: 100%;

}

.flex-item {
    color: #eee;
    font-size: 1.2em;
    padding: 1em;
    text-align: center;
    justify-content: center;
    flex-grow: 1;
}

.flex-item:nth-child(1) {
    background-color: #A62E5C;
    flex-grow: 3;
}

.flex-item:nth-child(2) {
    background-color: #9BC850;
}

.flex-item:nth-child(3) {
    background-color: #675BA7;
}
.flex-item:nth-child(4) {
    background-color: #620542;
}

Run Code Online (Sandbox Code Playgroud)