Question

我正在努力制作一个响应式设计，我将拥有像这样的结构。 enter image description here

但我希望垂直菜单从页眉到页脚，无论是否有文字。

这是我的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <meta charset="UTF-8">
    <title>template</title>
</head>
<body>
    <div class="">
        <div class="row">
            <header class="col-sm-12 col-lg-12 bordered header"> <!-- Header -->
                Header
            </header> <!-- End of header -->
        </div>
        <div class="row">
            <div class="col-sm-12 col-lg-12 bordered menu-horizontal"> <!-- Horizontal menu -->
                Menu horizontal
            </div><!-- End of horizontal menu -->
        </div>
        <div class="site-container container-fluid">
            <div class="row">
                <div class="col-sm-2 col-lg-2 bordered"> <!-- Vertical menu -->
                    <menu class="menu-vertical" role="menu">
                        Menu vertical
                    </menu>
                </div> <!-- End of vertical menu -->
                <div class="col-sm-10 col-lg-10  bordered"> <!-- Content -->
                    Content
                </div> <!-- End of content -->
            </div>
        </div>
        <div class="row">
            <footer class="col-sm-12 col-lg-12 bordered footer"> <!-- Footer -->
                Footer
            </footer> <!-- End of footer -->
        </div>
    </div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

这是CSS

.bordered {
    border: 1px solid black
}

.footer {
    position: fixed;
    bottom: 0;
}

.header {
    height: 67px;
}

.menu-vertical {
    position: relative;
    height: 100%;
}

.site-container {
    position: absolute;
    height: 100%;
    width: 100%;
}

.menu-horizontal {
    height: 18px;
}

Answer 1

有很多方法可以达到你想要的效果。一种可能的解决方案是：

1 /删除＆＃34;菜单 - 垂直＆＃34;从菜单元素中将其放在它的父级上。像这样：

<div class="col-sm-2 col-lg-2 bordered menu-vertical">
    <menu role="menu">
        Menu vertical
    </menu>
</div>

2 /然后，添加这个CSS：

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

你应该更接近你想要的东西;）

Answer 2

.menu-vertical {
position : absolute;
top : height1 px;
bottom : height2 px;
}

看我的屏幕：

http://screencast.com/t/N2NuyOju

Answer 3

我希望你能在这里找到可以提供帮助的东西。

<head lang="en">
    <meta charset="UTF-8">
    <title>template</title>

<style>

.bordered {
    border: 1px solid red
}

.header {
    height: 10%;
}

.menu {
    height: 10%;
}

.vertical {
    width: 30%;
    float: left;
    height: 70%;
}

.content {
    float: left;
}

.footer {
    position: fixed;
    bottom: 0;
    height: 10%;
}

</style>        

</head>


<body>
    <div class="">
        <div  class="bordered header">
            <header>
                Header
            </header> 
        </div>
        <div class="row">
            <div class="bordered menu"> 
                Menu horizontal
            </div>
        </div>
        <div class="">
            <div class="row">
                <div class="bordered vertical">
                    <menu class="" role="menu">
                        Menu vertical
                    </menu>
                </div>
                <div class="bordered content">
                    Content
                </div> 
            </div>
        </div>
        <div class="row">
            <footer class="bordered footer">
                Footer
            </footer> 
        </div>
    </div>

</body>
</html>

容器全高度菜单

3 个答案: