如何在画布下形成表格

问题描述 投票:0回答:1

我正在尝试在红色画布下面放置一个表格。 https://imgur.com/a/5dwPgeP显示当前发生的情况。我尝试了不同的Divs并将它们放在不同的代码段中,但是似乎没有任何效果。请帮我谢谢。代码:

<!DOCTYPE html>
<html>
<head>


    <link rel="stylesheet" type="text/css" href="WEBSITE.css">
    <!-- Load the Paper.js library -->

    <script type="text/javascript" src="node_modules/paper/dist/docs/assets/js/paper.js"></script>


</head>
<body>
    <div>
        <script src="displayTable.js"></script>
        <canvas id="mycanvas" resize></canvas>
    </div>

    <div>
        <label for="backgroundTable">Color for background of table:</label>
        <form action="website.php" method="post">
            <div class="form">
                <select name="userBackgroundSelect" id="userBackgroundSelect">
                    <option value="black">Black</option>
                    <option value="red">Red</option>
                    <option value="blue">Blue</option>
                    <option value="purple">Purple</option>
                </select>
            </div>
            <div>
                <input type="submit">
            </div>
        </form>
    </div>
</body>
</html>

和CSS:


html,
body {
    margin: 0;
    overflow: hidden;
    height: 100%;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
}

任何帮助,我都认为使用容器或其他方法会有所帮助。

html css paperjs
1个回答
0
投票

据我了解,您希望表格位于画布下方。根据我的评估,您的画布位于相对于视口(设备)的固定含义上,这意味着即使该画布始终位于同一位置页面滚动请尝试以下解决方案:

body {
    margin: 0;
  
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 50vh;
    background-color: red;
  
}
   <div>
        <script src="displayTable.js"></script>
        <canvas id="mycanvas" resize></canvas>
    </div>

    <div>
        <label for="backgroundTable">Color for background of table:</label>
        <form action="website.php" method="post">
            <div class="form">
                <select name="userBackgroundSelect" id="userBackgroundSelect">
                    <option value="black">Black</option>
                    <option value="red">Red</option>
                    <option value="blue">Blue</option>
                    <option value="purple">Purple</option>
                </select>
            </div>
            <div>
                <input type="submit">
            </div>
        </form>
    </div>
© www.soinside.com 2019 - 2024. All rights reserved.