Question

我想使用Bootstrap 3.3.7从头开始创建一个用于学习目的的仪表板。我的左手菜单有问题。我希望它占据它所获得的整个区域（col-lg-1列和100％高度）。我的问题是min-height:100% height: auto不起作用，但min-height:xxx px效果很好。

我在这里看到其他帖子说min-height:100%应该有用。

我做错了什么？

这是plunker。

<!DOCTYPE html>
<html>

<head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body>
    <main style="margin-top: 0px; padding-top: 0px; padding-bottom: 0px;">
        <div class="container-fluid padding-left-zero padding-right-zero">
            <div class="container-fluid padding-left-zero padding-right-zero">
                <div style="margin-bottom: -20px;">
                    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">

                        <div class=" container-fluid row">
                            <div class="pull-left">
                                <a class="navbar-brand" href="/">Dashboard</a>
                            </div>
                            <div style="height: 50px; padding: 15px;" class="pull-right">
                                <select>
                                    <option value="module">value</option>
                                </select>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
            <div class="row container-fluid padding-left-zero padding-right-zero">
                <!-- code of lenfthandmenu -->
                <!-- <div class="col-lg-1 pull-left navbar-inverse fill">
                    <div ui-view="leftHandMenu"></div>
                </div>-->
                <div class="col-lg-1 pull-left navbar-inverse fill2">
                    <div ui-view="leftHandMenu"></div>
                </div>
                <div class="col-lg-11 pull-right">
                    <div ui-view="mainContent"></div>
                </div>
            </div>
            <div>
                <div class="navbar navbar-inverse navbar-fixed-bottom">Navbar bottom</div>
            </div>
        </div>
    </main>
</body>

</html>

的CSS：

/* Styles go here */

body {
    padding-top: 50px;
}
.padding-left-zero {
    padding-left: 0px;
}

.padding-right-zero {
    padding-right: 0px;
}

li {
    list-style: none;
}

.silver-text {
    color: silver;
}

.min-width-100-percent {
    min-width: 100%;
}

.fill {
    min-height: 100%;
    height: auto;
}

.fill2 {
    min-height: 300px;
    height: auto;
}

Answer 1

将绝对位置属性和高度应用为100％，如下所示。

.fill2 {
   position:absolute;
   height: 100%;
}

DEMO

带引导程序的仪表板，为什么左手菜单不起作用min-height：100％，但它与px有关吗？

1 个答案: