Нижний колонтитул должен оставаться на дне

У меня есть некоторые проблемы с моим шаблоном. Я хочу создать простой заголовок, горизонтальную навигацию, вертикальную навигацию и шаблон контента с нижним колонтитулом в нижней части страницы. Меню должно быть растянуто до начала нижнего колонтитула, а нижний колонтитул должен быть на всей нижней части страницы, но не фиксированной позиции и прокрутки с содержимым, а под содержимым, поэтому, когда контент будет таким длинным, нижний колонтитул не отображается, пока вы не прокрутите страницу вниз.Нижний колонтитул должен оставаться на дне

Это работает, когда есть от чего прийти содержания, но когда есть только две линии, сноска будет прыгать под меню, как это:

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="container-fluid"> 
     <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 horizontal 
      </div><!-- End of horizontal menu --> 
     </div> 
    </div> 
<div class="contentus"> 
     <div class="site-container"> 
       <div class="col-sm-2 col-md-2 col-lg-2 bordered menu-vertical"> <!-- Vertical menu --> 
        <menu role="menu"> 
         Menu vertical 
        </menu> 
       </div> <!-- End of vertical menu --> 
       <div class="col-sm-10 col-md-10 col-lg-10 bordered content"> <!-- Content --> 
        Content 

        Combine Like Files 

        One way, and perhaps the easiest way, to reduce the number of HTTP requests is to combine like files. Specifically, combine all of the CSS files into one and all of the JavaScript files into one. Combining these files then compressing them creates one, hopefully small, HTTP request. 

        <!-- Bad --> 

        <!-- Good --> 
        In general, the CSS for a web page should be loaded at the beginning of the document within the head, while the JavaScript for a web page should be loaded at the end, just before the closing body tag. The reason for these unique placements is because CSS can be loaded while the rest of the website is being loaded as well. JavaScript, on the other hand, can only render one file at a time, thus prohibiting anything else from loading. One caveat here is when JavaScript files are asynchronously loaded after the page itself is done rendering. Another caveat is when JavaScript is needed in helping render the page, as such the case with the HTML5 shiv. 

        Image Sprites 


       </div> <!-- End of content --> 
     </div> 
    <footer class="col-sm-12 col-md-12 col-lg-12 bordered footer"> <!-- Footer --> 
     Footer 
    </footer> <!-- End of footer --> 
</div> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

style.css

.bordered { 
    border: 1px solid black 
} 

.footer { 
    position: static; 
    z-index: 10; 
    background-color: red; 
    bottom: 0; 
    height: 50px; 
    display: block; 
} 

.content { 
    position: relative; 
    float: right; 
    height: 100%; 
    display: block; 
} 

.header { 
    height: 67px; 
} 

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

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

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

.menu-horizontal { 
    height: 18px; 
}

источник

2014-10-25 Michal Takáč

Вы можете найти CSS решение здесь: http://css-tricks.com/snippets/css/sticky-footer/

источник

2014-10-25 12:07:49 sticksu

Работая большим, спасибо :) –

рад, что это помогает. :) Вы можете принять мой ответ, все нормально. :) – sticksu

-1

Смените положение из колонтитула родителя до родственник и сноскапозиция в фиксированной и колонтитула нижнего к 0px так:

.contentus{ 
    position:relative; 
} 

.footer{ 
    position:fixed; 
    bottom:0px; 
    width:100%; //if you want it to take the document width 
}

источник

2014-10-25 12:17:12 Ismail

Нижний колонтитул должен оставаться на дне

ответ

Смежные вопросы