Вертикальное меню из меню в нижний колонтитул всегда

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>

html css twitter-bootstrap

1

Michal Takáč 26 Окт 2014 в 15:42

Я попробовал ваш код внутри jsFiddle, и нижний колонтитул, кажется, прилипает к нижней части страницы, даже если внутри div page-wrap нет содержимого: jsfiddle.net/r3ua89bw/2

–

Fahad Hasan

26 Окт 2014 в 21:32

Answer 1

Вот ссылка на мой Codepen.

Вы должны объявить height: 100%; на всем протяжении дерева DOM. Этого сложно добиться в CSS. По сути, вы должны учитывать 100% высоты области просмотра. В моем простом примере на отступы header и footer приходится 5%, а на боковую панель nav — оставшиеся 95%.

Надеюсь, это поможет.

0

JamesJosephFinn 26 Окт 2014 в 16:32

Это не решение, потому что когда контента много, он будет проходить через футер.

–

Michal Takáč

26 Окт 2014 в 17:50

Answer 2

Попробуйте установить min-height на 100 % в вертикальном меню.

0

tomrozb 26 Окт 2014 в 16:36

Вертикальное меню из меню в нижний колонтитул всегда

2 ответа

Похожие вопросы

Новые вопросы

html