Overlay холст на всей странице (а не только окно)

Question

фона

Мы представляем несколько уроков в длинном формате страница, при этом каждый раздел являются полной высотой окна ... там много различных секций в каждом урок.

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

Целью здесь является создание холста для охвата всей страницы, чтобы пользователи могли рисовать повсюду.

Что я Пробовал

Я добавил position:absolute на холст (#theCanvas) и положил холст на верхней части моего содержания, но когда я прокручиваю вниз, я не могу сделать ни на что при начальном окне видового ,

Мой код

Markup

<canvas id="theCanvas"></canvas> 

<div class="right-menu"> 

    <div class="right-menu-section"> 
     <div class="right-menu-section-circle"> 
      <svg height="32" width="32"> 
       <circle cx="16" cy="16" r="16" fill="#eeeeee"> 
      </svg> 
     </div> 
     <div class="right-menu-section-circle"> 
      <svg height="16" width="16"> 
       <circle cx="8" cy="8" r="8" fill="#eeeeee"> 
      </svg> 
     </div> 
     <div class="right-menu-section-circle"> 
      <svg height="8" width="8"> 
       <circle cx="4" cy="4" r="4" fill="#eeeeee"> 
      </svg> 
     </div> 
    </div> 

    <div class="right-menu-section"> 
     <div class="right-menu-section-icon"> 
      <i class="fa fa-eraser" aria-hidden="true"></i> 
     </div> 
     <div class="right-menu-section-icon"> 
      <i class="fa fa-pencil" aria-hidden="true"></i> 
     </div> 
     <div class="right-menu-section-icon"> 
      <i class="fa fa-hand-pointer-o" aria-hidden="true"></i> 
     </div> 
    </div> 

    <div class="right-menu-section"> 
     <div id="colors"></div> 
    </div> 

    <div class="right-menu-section"> 
     <div class="right-menu-section-icon"> 
      <i class="fa fa-hand-paper-o" aria-hidden="true"></i> 
     </div> 
    </div> 

</div> 

<div class="" style="display:block;position:absolute;float:right;margin-left:40px;margin-top:20px"> 
    <h4>Estimated Time to complete:<h4> 
    <h2> 
     <i class="fa fa-clock-o"></i> 
     25m 
    </h2> 
</div> 

<!-- intro --> 
<div class="container-fluid card" style="background:#e8e6e1"> 
    <div class="container card-content"> 
     <h1 class="text-center">Welcome...</h1> 
     <h4 class="text-center"> 
      Today's Lesson Focus: 
      <?php echo $focus->lesson_focus; ?> 
     </h4> 
     <p class="text-center"><b>Details:</b> <?php echo $focus->details; ?></p> 
    </div> 
</div> 
<!-- end intro --> 

<!-- lesson --> 
<?php foreach ($cards as $card) : ?> 
<div class="container-fluid card" style="background:#eaeaec"> 
    <div class="container card-content"> 
     <div class="col-md-6"> 
      <h2> 
       <?php echo $card->card_title; ?> 
       <i class="fa fa-volume-up"></i> 
      </h2> 
      <p><?php echo $card->card_content; ?></p> 
     </div> 
     <div class="col-md-6"> 
      <img src="<?php echo $card->card_file_path; ?>" alt=""> 
     </div> 
    </div> 
</div> 
<?php endforeach; ?> 
<!-- end lesson --> 

<!-- outtro --> 
<div class="container-fluid card" style="background:#E7E1E8"> 
    <h1 class="text-center">Thanks!</h1> 
</div> 
<!-- end outtro --> 

CSS

.card { 
     height: 100vh; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     margin-right:50px; 
    } 

    .card-content { 

    } 

    .card-content img { 
     width:100% !important; 
     -webkit-box-shadow: 0px 0px 71px -11px rgba(0,0,0,0.75); 
     -moz-box-shadow: 0px 0px 71px -11px rgba(0,0,0,0.75); 
     box-shadow: 0px 0px 71px -11px rgba(0,0,0,0.75); 
     border-radius: 20px; 
    } 

    .right-menu { 
     position:fixed; 
     float:right; 
     height:100vh; 
     right: 0; 
     top: 0; 
     width:50px; 
     background:#222222; 
     -webkit-box-shadow: -4px 0px 10px 0px rgba(153,153,153,1); 
     -moz-box-shadow: -4px 0px 10px 0px rgba(153,153,153,1); 
     box-shadow: -4px 0px 10px 0px rgba(153,153,153,1); 
     border-top:1px solid #444444; 
    } 

    .right-menu-section { 
     border-top:1px solid #444444; 
     padding-top:20px; 
     padding-bottom:20px; 
    } 

    .right-menu-section-icon { 
     color: #eeeeee; 
     margin-top:10px; 
     font-size:24px; 
     display:block; 
     text-align:center; 
    } 

    .right-menu-section-circle { 
     color: #eeeeee; 
     margin-top:10px; 
     display:block; 
     text-align:center; 
    } 

    .swatch { 
     width:30px; 
     height:30px; 
     border-radius:15px; 
     box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5); 
     display: block; 
     margin-top: 10px; 
     margin-left:10px; 
    } 

    #theCanvas { 
     position: absolute; 
    } 

Мой вопрос

Как я могу получить холст, чтобы охватить всю страницу не J Уст окно.

Answer 1

Используйте этот CSS для холста:

#theCanvas{ 
    position:fixed; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
} 

элементов с пребыванием фиксированного положения в том же положении, учитывая с верхними/справа/снизу/слева-значением относительно видового экрана, поэтому он продолжает быть распространяются по всей странице, даже когда вы прокручиваете.

Answer 2

Попробуйте добавить этот CSS:

html { 
    height:100%; 
} 

body { 
    min-height:100%; 
} 

#theCanvas { 
    min-height:100%; 
}