引导导航采用 100% 高度答案

【问题标题】：Bootstrap nav take 100% height引导导航采用 100% 高度
【发布时间】：2016-05-07 17:16:58
【问题描述】：

所以，这是我的主页：

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TITLE</title>

    <link href="/resources/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="/resources/css/myStyle.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<jsp:include page="parts/header.jsp"/>
<jsp:include page="parts/leftMenu.jsp"/>

<h2>WELCOME IN MY STORE!!!</h2>
<h2>WELCOME IN MY STORE!!!</h2>
...
<h2>WELCOME IN MY STORE!!!</h2>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/resources/js/bootstrap.min.js"></script>

</body>
</html>

如您所见，我在此处包含文件“leftMenu.jsp”，我在其中动态添加了一些我想出现在左侧边栏中的类别。这是文件：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="nav nav-pills nav-stacked col-lg-1">

    <c:forEach items="${categoryNames}" var="category">
        <c:choose>
            <c:when test="${category.getSubCategories().size()>'0'}">
                <li><a data-toggle="collapse" href="#${category.getName().toLowerCase()}">${category.getName()}<span
                        class="caret"/></a></li>
                <ul id="${category.getName().toLowerCase()}" class="collapse">
                    <c:forEach items="${category.getSubCategories()}" var="subCategory">
                        <li><a href="category/${category.getId()}/${subCategory.getId()}">${subCategory.getName()}</a>
                        </li>
                    </c:forEach>
                </ul>
            </c:when>
            <c:otherwise>
                <li><a href="category/${category.getId()}/0">${category.getName()}</a></li>
            </c:otherwise>
        </c:choose>
    </c:forEach>

</div>

我希望这个侧边栏占据整个可用高度，所以我尝试添加这个 myStyle.css：

.nav {
    height: 100%;
    min-height: 100%;
}

但它并没有按我的意愿工作。

我该如何解决？

【问题讨论】：

标签： html twitter-bootstrap jsp jstl sidebar

【解决方案1】：

尝试设置position: absolute;
这是工作解决方案https://jsfiddle.net/L24x1o20/2/

【讨论】：

嗯，它适用于我的引导程序。在.navbar 类上使用min-height: 100%; 和postion:absolute;。你可以在jsfiddle中设置它吗？
我试图在 jsfiddle 做到这一点，但它出现在另一个之上 jsfiddle.net/L24x1o20
用 jsfiddle 检查更新的答案。只需调整预览窗口的大小即可获得无响应版本