Question

我需要将我的垂直菜单一直延伸到页脚的底部，即使没有内容也是如此。我之前发布了这个，并且解决方案正在运行，但经过一些更改后我无法再次修复它。我有点迷茫，因为这应该很容易，而且我会因为这么简单的事情而停滞不前。

请您解释一下解决方案的作用，我会理解为什么解决了这个问题？

以下是现在的样子：

enter image description here

以下是代码：

@media only screen and(min-width: 1368px) {
    .site-container {
        height: 633px;
    }
}

html, body {
    height: 100%;
}

.page-wrap {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -50px;
}

.page-wrap:after {
    content: "";
    display: block;
}

.footer, .page-wrap:after {
    height: 50px;
}

.bordered {
    border: 1px solid black
}

.footer {
    position: relative;
    width: 100%;
    padding-left: inherit;
    z-index: 10;
    background-color: red;
    height: 50px;
    display: block;
}

.content {
    position: relative;
    float: right;
    height: 100%;
    display: block;
    padding-top: 10px;
}

.header {
    margin: inherit;
    position: relative;
    width: 100% ;
}

.menu-vertical {
    position: relative;
    background-color: #aaa;
    float: left;
    height: 100%;
}

li {
    list-style-type: none;
    padding: 0;
}

ul {
    padding: 0;
}

menu {
    padding: 0;
    padding-right: 50px;
}

.site-container {
    position: relative;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.site-container > .row:first-of-type {
    height:100%;
}

.menu-horizontal ul {
    padding: 0;
}

.menu-horizontal li {
    list-style-type: none;
    padding: 0;
    padding-left: 50px;
    margin: 0;
    display: inline;
}

.menu-horizontal {
    margin: inherit;
    position: relative;
    padding-top: 5px;
}

.page {
    width: 90%;
    padding-left: 10%;
    min-height: 100%;
}

.page-wrap .row {
    padding: 0;
    margin: 0;
    min-height: 100%;
}

的index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <meta charset="UTF-8">
    <title>template</title>
</head>
<body>
    <div class="page-wrap">
        <div class="row">
            <header class="col-sm-12 col-md-12 col-lg-12 bordered header"> <!-- Header -->
                Header
            </header> <!-- End of header -->
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12 bordered menu-horizontal"> <!-- Horizontal menu -->
                <menu class="menu-horizontal">
                    <ul>
                        <li>1nav item 1</li>
                        <li>1nav item 2</li>
                        <li>1nav item 3</li>
                        <li>1nav item 4</li>
                        <li>1nav item 5</li>
                        <li>1nav item 6</li>
                    </ul>
                </menu>
            </div><!-- End of horizontal menu -->
        </div>
        <div class="site-container">
            <div class="col-sm-2 col-md-2 col-lg-2 bordered menu-vertical"> <!-- Vertical menu -->
                <menu role="menu">
                    <ul>
                        <li>2nav item 1</li>
                        <li>2nav item 2</li>
                        <li>2nav item 3</li>
                        <li>2nav item 4</li>
                        <li>2nav item 5</li>
                        <li>2nav item 6</li>
                    </ul>
                </menu>
            </div> <!-- End of vertical menu -->
            <div class="col-sm-10 col-md-10 col-lg-10 bordered content"> <!-- Content -->
            </div> <!-- End of content -->
        </div>
    </div>
    <footer class="col-sm-12 col-md-12 col-lg-12 bordered footer"> <!-- Footer -->
        Footer
    </footer> <!-- End of footer -->
</body>
</html>

Answer 1

尝试在垂直菜单上将min-height设置为100％

Answer 2

这是link to my Codepen。

您必须在DOM树中一直声明height: 100%;。这在CSS中很难实现。基本上，您必须占视口高度的100％。在我的简单示例中，header和footer的填充占5％，侧栏nav占剩余的95％。

希望有所帮助。

从菜单到页脚的垂直菜单始终如一

2 个答案: