Background

背景

We are presenting some lessons in a long page format, with each section being the full height of the window... there many different sections in each lesson.

我们将以长页面格式呈现一些课程，每个部分都是窗口的全部高度...每节课中有许多不同的部分。

What I am trying to do I want people to be able to scribble all over the page. As you can see there are some options for highlighting and erasing canvas content.

我想做什么我希望人们能够遍布整个页面。正如您所看到的，有一些选项可用于突出显示和删除画布内容。

The goal here is to get a canvas to cover the entire page so that users can draw everywhere.

这里的目标是获得一个画布来覆盖整个页面，以便用户可以在任何地方绘制。

What I've Tried

我试过的

I have added position:absolute to my canvas (#theCanvas) and that put the canvas on top of my content but when I scroll down I cant draw on anything under the initial window viewport.

我已添加位置：绝对到我的画布（#theCanvas）并将画布放在我的内容之上，但是当我向下滚动时，我无法在初始窗口视口下绘制任何内容。

My Code

我的代码

Markup

标记

    

        

            
        
        

            
        
        

            
        
    

    

        

            
        
        

            
        
        

            
        
    

    

        

    

    

        

            
        
    




    
Estimated Time to complete:

    

        
        25m
    




    

        
Welcome...
        

            Today's Lesson Focus:
            lesson_focus; ?>
        
        
Details: details; ?>
    






    

        

            

                card_title; ?>
                
            
            
card_content; ?>
        
        

            
        
    






    
Thanks!

CSS

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;
    }

My Question

我的问题

How can I get the canvas to span the entire page not just the window.

如何让画布跨越整个页面而不仅仅是窗口。

2 个解决方案

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

html {
    height:100%;
}

body { 
     min-height:100%;
}

#theCanvas {
     min-height:100%;
}