Question

由于各种原因，我正在以所见即所得的网站设计师作为实验。（计划是使这个桌面和移动设备友好）

我遇到的一个问题是通过宽度和高度使div＃canvas成为100％。另外，我甚至没有在Firefox上看到div＃canvas，也不确定为什么会这样。

让我详细说明......

我的div＃canvas位于我想要的位置。我的div.options位于右侧：0;它的宽度是291px。我想告诉我的div＃canvas填充页面宽度，使其覆盖正文，但不要超过它。

我尽力解释，但为了更直观地理解，这是我为这篇文章制作的设计原型。 enter image description here

HTML ：

<body>
    <header class="header">Links</header>
    <div class="toolbox">Tools</div>

    <div class="content" id="canvas"></div>

    <div class="options">Options</div>
</body>

CSS ：

/* Canvas */
#canvas {
    position:absolute;
    top:81px; left:44px;
    width:100%; height:100%;
}

.header {
    position:absolute;
    top:0; left:0;
    width:100%; height:81px;
}

.toolbox, .options {
    position:absolute;
    top:81px; height:100%;
}

.toolbox { left:0; width:44px; }
.options { right:0; width:291px; }

Answer 1

您可以指定所有四个尺寸，它会拉伸画布：

#canvas {
    position: absolute;
    top: 81px; left:44px; right: 291px; bottom: 0;
}

将DIV几何图形固定到浏览器100％除了其他元素

1 个答案: