"Right variant of creating HEADER anf FOOTER"
Bootstrap 4.0.0 Snippet by TerraTsukiyomi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <div class="header"> <div class="container"> <div class="body_of_header"> <ul class="list-inline"> <li>Home</li> <li>Blog</li> <li>Log in</li> </ul> </div> </div> </div> <div class="container"> <p> Maecenas hac faucibus aliquam semper commodo sodales tellus quisque. Non tincidunt purus est lacus scelerisque metus vitae dictumst fames dictumst placerat hendrerit suspendisse ridiculus lectus sollicitudin leo eleifend taciti tellus blandit praesent ligula nostra. Elit. Elementum suscipit dictum nisl porta, odio ut non Lobortis cras convallis eros nisi leo ut velit, taciti fames dignissim feugiat imperdiet quam sociis non quis sodales. Torquent sapien consequat nam phasellus viverra fames, torquent fusce. Neque diam ornare mattis justo eros pellentesque eu enim varius lacus et viverra parturient. Curabitur justo mus. Cras id. Netus. Fermentum fames hymenaeos consequat augue nunc mattis parturient quis ante sit lorem pharetra. Nibh vel fusce quam. Eleifend. Cras eget. Posuere praesent habitant turpis. Arcu fermentum. Hac justo nibh neque et adipiscing. Vehicula feugiat sollicitudin auctor magna ut accumsan sodales arcu. Hac. Justo neque at felis quam maecenas suscipit proin viverra odio. Primis consectetuer eu facilisis habitant, aenean. Hymenaeos. Vestibulum fames orci elit feugiat libero turpis faucibus tempor ac dignissim, sodales. Massa eros placerat. Amet lacinia volutpat vivamus sociosqu, suscipit vel per varius pede proin feugiat velit habitasse. Commodo quam. Dolor ipsum etiam diam rutrum non cursus magnis gravida proin elit varius sociosqu ligula luctus donec lectus habitant. Egestas nibh felis, ornare curabitur consectetuer a vivamus venenatis leo eros. Ornare, posuere at, risus facilisis tortor habitasse a. Dolor aliquam hac habitant curabitur pretium magnis est porta donec venenatis a diam pede purus quis est a mi nascetur sollicitudin fringilla. Vel Ut, taciti facilisi rutrum nascetur blandit. Sodales phasellus eu et luctus sem rhoncus pharetra ultricies vehicula nulla sociosqu, mus cras est porta. Mus ante congue dapibus faucibus venenatis fermentum nulla nonummy mollis iaculis. Nulla nulla dignissim inceptos. Ultrices hymenaeos tellus facilisis. Curabitur dapibus. Elit, commodo aliquet odio nam. Euismod quisque natoque accumsan ligula tortor donec nec rhoncus etiam nibh erat. </p> </div> <div class="footer"> <div class="container"> <div class="body_of_footer"> <ul class="list-inline"> <li>Home</li> <li>Blog</li> <li>Log in</li> </ul> </div> </div> </div>
li{ list-style-type: none; } .header{ background-color: #f2f489; padding-bottom: 48px; } .body_of_header{ height: 48px; position: fixed; } .footer{ background-color: #f194f9; padding-bottom: 98px; } .body_of_footer{ height: 98px; position: fixed; }

Related: See More


Questions / Comments: