Bootstrap nav 取 100% 高度

Question

所以，这是我的主页：

<%@ 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%;
}

但它并不像我想要的那样工作。

我该如何解决？

Answer 1

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

Bootstrap nav 取 100% 高度

Bootstrap nav take 100% height

html

jsp

jstl

sidebar

twitter-bootstrap