Блог

Главная - Вопросы по программированию - Установите p5 canvas на максимальную ширину родительского div

Установите p5 canvas на максимальную ширину родительского div

#javascript #html #css #p5.js

#javascript #HTML #css #p5.js

Вопрос:

Как я могу получить ширину моего родительского div?

Мне нужно, чтобы холст был максимальной шириной, какой он может быть. Но div все равно должен находиться внутри границ, установленных моим CSS-файлом.

Другими словами: как мне получить максимально возможную ширину, все еще находясь внутри границ divs?

Итак:

 function setup() {
    //somehow get the width of the div and set the canvas to that
    const myCanvas = createCanvas(400, 400);
    myCanvas.parent('canvasDiv');
}

function draw() {
    background(0);
}

HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Default Page Title</title>
    <link rel="stylesheet" href="blogPost.css">
    <script type="text/javascript" src="../p5.js"></script>
    <script type="text/javascript" src="sketch.js"></script>
</head>
<body>


<div id="containerHeader">
    <h1>Default Page header</h1>
</div>
<div id="canvasDiv"></div>
<div id="container">
    <p>default description</p>
</div>
</body>
</html>

И, наконец, мой CSS:

 #canvasDiv {
    margin: 0;
    padding: 0;
}

Ответ №1:

Чтобы получить ширину моего родительского div, вы можете добавить высоту и ширину CSS для canvasDiv. И после, если вы хотите, чтобы этот контейнер получал высоту и ширину от родительского, вы можете написать height: inherit; и width: inherit;

Комментарии:

1. Я попробую и посмотрю, но что, если этот родительский элемент divs также не получит максимальную ширину, которую он может?

2. Как мне на самом деле получить размер элемента?

3. Чтобы получить размер элемента. Я думаю, вы можете использовать JS, как var elmnt = document.getElementById("myDIV"); и после использования elmnt.offsetHeight и elmnt.offsetWidth

4. Большое вам спасибо. Хотя теперь у меня есть проблема, поскольку показания, как ни странно, составляют 1 пиксель, он работает и работает так, как должен