Member 12724052 Ответов: 4

Жидкий верхний и Нижний колонтитулы (CSS)

Привет, я пытался это исправить, но напрасно.

Я предоставил ссылку на jsfiddle.


Я хочу, чтобы верхний колонтитул был сверху, а нижний-снизу, независимо от размера или устройства.

Что я уже пробовал:

https://jsfiddle.net/vwrn08mg/

4 Ответов

Рейтинг:
2

santosh-k1

я обновил ваш код, как показано ниже :

<div class="page-wrapper">
<div class="menu">
  <ul class="mainmenu">
    <li>
      <a class="menuitem">1</a>
    </li>


    <li>
      <a class="menuitem">2</a>
    </li>


    <li class="menulogo">have a logo here</li>
  </ul>
</div>


<div class="form">

  <br>
  <br>
  <div class="topbar">
    <div class="spanColor">
    </div>
    <input class="input" id="searchName" placeholder="text?" type="text">
  </div>
  <button class="submit" id="submit">Search</button>
</div>
<footer class="footer">
  logo on the left and 
  //want to add (C) 2016 on the right
</footer>
<div>

Обновленный CSS :

html,
body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  font-size: 62.5%;
}

body .menu {
  position: fixed;
  width: 100%;
  background-color: #009530;
}

body .menu .mainmenu {
  background-size: cover;
  background-position: 50%;
}

body .menu .mainmenu:before {
  position: relative;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: inherit;
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

body .menu .mainmenu:after {
  clear: both;
  content: "";
  display: block;
}

body .menu .mainmenu .menuitem {
  float: right;
  font-family: Raleway;
  width: 10%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  cursor: pointer;
  color: white;
  font-size: 1.5rem;
}

body .menu .mainmenu .menulogo {
  float: left;
  font-family: Raleway;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: white;
  font-size: 1.2rem;
}

body .article {
  font-size: 1.4rem;
  margin: 20px auto;
  color: white;
  opacity: 0;
  visibility: hidden;
  -moz-transition: opacity 400ms linear;
  -o-transition: opacity 400ms linear;
  -webkit-transition: opacity 400ms linear;
  transition: opacity 400ms linear;
  -moz-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  transition-delay: 800ms;
  top: 0;
  position: relative;
}

body .article.active {
  opacity: 1;
  visibility: visible;
}

body .article h1 {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 20px;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.form {
  position: fixed;
  margin: 0 auto;
  top: 35%;
  left: 50%;
  -moz-transform: translate3d(-50%, 0, 0);
  -ms-transform: translate3d(-50%, 0, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  width: 350px;
  padding: 20px;
  overflow: hidden;
  background-color: black;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: inherit;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
}

.footer {
  flex: 0 0 auto;
  position : fixed;
  padding: 1rem;
  bottom: 0;
  background-color: #636469;
  width:100%
}

Рейтинг:
16

Member 12724052

.нижний колонтитул{
положение: фиксированное;



это все исправило

Рейтинг:
1

Karthik_Mahalingam

попробовать это

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5px;
  background-color:green;
  text-align: center;
}

Рейтинг:
0

Peter Leow

Он ведет себя так, как говорит ваш CSS, виновник здесь:

.form {
    position: fixed;
    top: 35%;

Вы фиксируете положение формы на 35% сверху. Изменить свойство position на относительные и снимите верхнюю собственность:
.form {
    position: relative;
    top: 35%;

Вы должны прочитать "CSS Layout-свойство position[^] "и экспериментируйте с различными параметрами.

Если вы нацелены на многоэкранные устройства, вам следует изучить адаптивный веб-дизайн, проверьте Адаптивный веб-дизайн кодифицирован - кодовый блог Питера Леоу[^]
.