Позиционирует нижний колонтитул в самом низу только с абсолютным содержанием - PullRequest
Новая
       39

Позиционирует нижний колонтитул в самом низу только с абсолютным содержанием

0 голосов
/ 21 января 2019

Прямо сейчас я создаю страницу с более или менее только фиксированным и абсолютным содержанием.Первый видовой экран было довольно легко создать, потому что он имеет максимальную высоту 100vh.Поэтому я разработал второй раздел с полем top: 100vh.Пока все работает.Но вторая секция больше не высотой 100vh.Высота более или менее неизвестна.

Теперь я хочу создать новый раздел или нижний колонтитул.Но проблема в том, что он застрял в верхней части страницы.Как будто нет другого контента.Я думаю, что это из-за позиции: абсолютный на любой другой элементТакже положение: абсолютное и нижнее: 0 не работает для нижнего колонтитула.Затем он просто прилипает к нижней части окна просмотра, но не ко всей странице.

Как мне оформить следующий материал, чтобы он оставался ниже другого содержимого?

Причина, по которой я использую положение: absolute для фиксированного фона, созданного с помощью css.Может быть, есть более разумный способ сделать так, чтобы содержимое перекрывало фон без абсолютной позиции?

Я думаю, это соответствующий код, который вам нужен для моей задачи: 


<div class="first">
    Lorem ipsum first page
</div>

<div class="second">
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
    <p>Some Images here</p>
</div>

<footer>
    this is the footer
</footer>


<div class="background"></div>

body {
  padding: 0;
  margin: 0;}
.first {
  position: absolute;
  color: white;
  height: 100vh;
  width: 100vw;
}

.second {
  position: absolute;
  margin-top: 110vh;
  color: white;
  width: 100vw;
}

footer {
  position: absolute;
  background-color: coral;
  z-index: 200;
  height: 10em;
  width: 100vw;
}


.background {
  background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px;
  background-color: #12364a;
  background-size: 12px 12px;
  width: 100vw;
  height: 100vh;
  min-height: 300px;
  position: fixed;
  overflow: hidden;
  background-attachment: fixed;
  z-index: -1;
  }
  .background:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}

Ответы [ 2 ]

0 голосов
/ 21 января 2019

Я не знаю, почему вы добавляете так много CSS и усложняете! То, что я понял из вопроса, можно сделать с помощью простого CSS. Вот пример: 

body {
  padding: 0;
  margin: 0;
  background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px;
  background-color: #12364a;
  background-size: 12px 12px;
  background-attachment: fixed;
  color: #fff;
}

footer {
  background-color: coral;
  height: 10em;
  width: 100%;
}
<div class="first">
  Lorem ipsum first page
</div>
<div class="second">
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
</div>
<footer>
  this is the footer
</footer>
<div class="background"></div>

если вы хотите 100vh интервал между .first и .second, то: 

body {
  padding: 0;
  margin: 0;
  background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px;
  background-color: #12364a;
  background-size: 12px 12px;
  background-attachment: fixed;
  color: #fff;
}

.first {
  padding-bottom: 100vh;
}

footer {
  background-color: coral;
  height: 10em;
  width: 100%;
}
<div class="first">
  Lorem ipsum first page
</div>
<div class="second">
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
  <p>Some Images here</p>
</div>
<footer>
  this is the footer
</footer>
<div class="background"></div>
0 голосов
/ 21 января 2019

Оберните весь ваш контент в элемент div, который вы позиционируете: абсолютный, вместо того, чтобы все элементы были абсолютными. 

body {
  padding: 0;
  margin: 0;}
.first {
  color: white;
  height: 100vh;
  width: 100vw;
}

.second {
  margin-top: 110vh;
  color: white;
  width: 100vw;
}

footer {
  background-color: coral;
  z-index: 200;
  height: 10em;
  width: 100vw;
}


.background {
  background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px;
  background-color: #12364a;
  background-size: 12px 12px;
  width: 100vw;
  height: 100vh;
  min-height: 300px;
  position: fixed;
  overflow: hidden;
  background-attachment: fixed;
  z-index: -1;
  }
  .background:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-image: radial-gradient(circle, transparent 0%, rgba(7, 9, 11, 0.56) 100%);
}

.test{
	position: absolute;
}
<html>
<head>
</head>
<body>
	<div class="test">
	
		<div class="first">
		Lorem ipsum first page
		</div>

		<div class="second">
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
			<p>Some Images here</p>
		</div>

		<footer>
			this is the footer
		</footer>
	</div>

	<div class="background"></div>
</body>
</html>
...