This is not a duplicate "how to make the right footer" and so on.
The situation is as follows: the basement is pressed correctly only when the page is 50% distant 
But if the page is brought closer to 100%, as it should be, the right scroll appears and the basement is separated from the bottom.
HTML Page Code:
[noajax] <header> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="{description}"> <meta name="keywords" content="{keywords}"> <title>Sampwar</title> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="https://sampwar.ru/css/monbutton.css"> <link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/simpleTooltip.css"> <link rel="stylesheet" href="/css/toastr.min.css"> <link href="/css/font-awesome-4.4.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="/js/wysibb/theme/default/wbbtheme.css" /> <link href="/favicon.png" rel="icon" type="image/x-icon" /> <script src = "/js/ckeditor/ckeditor.js" ></script> <script type="text/javascript" src="/js/jquery-2.0.3.min.js"></script> <script src="/js/bootstrap.js"></script> <script src="/js/jquery.circliful.min.js"></script> <script src="/js/jquery.pwstabs-1.2.1.js"></script> <script type="text/javascript" src="/js/wysibb/jquery.wysibb.js"></script> <!--------------------------------------------------------------------------> <script type="text/javascript" src="/js/jquery-ui-1.10.4.custom.min.js"></script> <script type="text/javascript" src="/js/base64.js"></script> <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script type="text/javascript" src="/js/highstock.js"></script> <script type="text/javascript" src="/js/users.js"></script> <script type="text/javascript" src="/js/slider.js"></script> [login]<script language="JavaScript" type="text/javascript"> var user_info = []; user_info['id'] = {accountsid}; </script>[/login] </header> <body> <div style="width:100%;margin: 0 auto;"> <div id='navigation_title2'> {header} <div class="page-content"> <div class="index"> <div class="content-index" id="content-base">{content} </div> </div> </div> </div> </div> <div id="footer"></div> <div id="modal"></div> [/noajax] </body> </html> [ajax] {content} <div style="display:none;"> <div id="nurl_title">{title}</div> </div> [/ajax] CSS Code:
* { margin: 0; padding: 0; } html, body { background: url(https://forum.sampwar.ru/styles/brivium/silver/extra/bg-body.jpg) no-repeat center top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; } .page-content { box-sizing: border-box; min-height: 100%; padding-bottom: 90px; } #footer { bottom:0; width: 100%; height: 120px; position: absolute; background: red; } Site link: https://sampwar.ru
