В настоящее время я работаю над сайтом, и я схожу с ума по поводу этого нижнего колонтитула, который не останется внизу страницы. Я уже проверял другие темы с той же проблемой, и ничто не помогло мне.Не могу установить нижний колонтитул в нижней части страницы
Когда я пытаюсь «относительный», нижний колонтитул проходит под «топ-боксом» (который является моим заголовком), и когда я пытаюсь «абсолютный», он идет посередине страницы.
<header>
<div class="topbox">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">Services</a></li>
<li><a href="#contact">Clients</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</header>
<body>
<div class="wrapper">
<div class="scrollbtn"><img src="Images/Scroll.png" style="width:40%"/>
</div>
<div class="bgbox">
<div class="box2">
<a> Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</a>
</div>
</div>
<div id="footer">© 2017 "TEXT" All Rights Reserved</div>
</div>
</body>
Так вот у нас есть TOPBOX, который является заголовок, обертка, scrollbtn (ПИК мыши, чтобы указать, нужно прокручивать), bgbox (фон контента), box2 (содержание), то «lorep Ipsum »- это контент и очень длинный, что позволяет прокручивать пользователя. Это моя проблема, нижний колонтитул находится внизу страницы, когда вы загружаете его и, таким образом, посередине, когда вы прокручиваете вниз.
Вот CSS:
body, html {
width:100%;
height:100%;
background-color: #060b0f;
padding:0%;
background-image: url('../images/background3.jpg');
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* HEADER */
.topbox {
margin:0%;
position: fixed;
top:0%;
left: 0%;
width:100%;
z-index:999;
text-align:center;
overflow: hidden;
padding:0%;
font-family:Impact;
font-size:20px;
}
.topbox ul {
list-style-type: none;
margin: 0%;
padding: 0%;
overflow: hidden;
background-color: #459cfe;}
.topbox li {
display: inline;
}
.topbox li a {
display: inline;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topbox li a:hover:not(.active) {
background-color: #397fcd;
}
.active {
background-color: #fff;
}
/*HEADER FIN*/
.scrollbtn {
position: absolute;
bottom : 0%;
left: 49%;
}
.hot {
color:#4080e1;
}
.box2 {
margin-top:0px;
margin-left:10%;
width : 70%;
opacity:1;
color: black;
overflow: hidden;
text-align:center;
z-index:4;
background-color:transparent;
}
.box2 a{
opacity:1;
}
.bgbox {
margin-top:0px;
margin-left:8%;
padding: 5%;
padding-left: 8%;
width : 70%;
position: absolute;
top : 10%;
left: 0%;
background-color: rgba(255,255,255,0.5);
overflow: hidden;
text-align:center;
z-index:3;
}
.bgbox:hover {
background-color: rgba(255,255,255,0.9);
}
#footer {
font-size:20px;
cursor:pointer;
color: black;
text-align: center;
width:100%;
position:relative;
left:0px;
bottom:0px;
background-color: #459cfe;
}
.wrapper {
height:100%;
}
Я пробовал так много разных вещей (изменение высоты тела, обертывание все, относительный, абсолютный, фиксированный, статическая, ...), что я не могу думать ничего другого. Мне нужна внешняя точка зрения.
«Верхняя панель» должна находиться внутри тега тела. Я не говорю, что это исправление, но просто указывая на эту проблему или это опечатка –
Нет, это не опечатка, но, похоже, это не проблема. –