Я хочу поместить div с классом "height_mark" каждые 980 пикселей внизу веб-страницы

Question

Вот что у меня есть:

Javascript (с библиотекой jquery в заголовке):

    var prev_height=0;
    for (var i=0; i<=100; i++) {
        prev_height+=980;
        $("body").append("<div class='height_mark' style='bottom:"+prev_height+"px'>"+(i)+"</div>");
    }

CSS:

.height_mark {
  position: absolute;
  left:300px;
  height:20px;
  width:30px;
  background-color:black;
  color:white;
}

Что я хочу сделать: я хочу поместить div с классом "height_mark" каждые 980 пикселей внизу веб-страницы.

Проблема: по какой-то причине он не отображает метки высоты.

Answer 1

Используйте «margin-top» вместо «bottom» в JS и определите величину поля для каждого добавляемого div (также оберните его в функцию и обязательно вызовите функцию):

let winHeight = 0;
let margin = 980;

function addDivs(){
    for (var i=0; i<=100; i++) {
        winHeight+=980;
        $("body").append("<div class='height_mark' style='margin-top:"+margin+"px'>"+(i)+"</div>");
    }
    }

addDivs()

и использовать положение: относительное в css:

.height_mark {
  position: relative;
  left:300px;
  height:20px;
  width:30px;
  background-color:black;
  color:white;
}

кодовое поле:

https://codepen.io/pen/bGVNYmm