div三角形，画布大小

罗宾逊

在这个JSFiddle示例中，我使用divs和css进行了屏幕布局，然后在每个区域内添加了带有黑色边框的canvas元素，以便可以看到其范围。

在此屏幕截图中，您可以看到左侧边栏的3个主要元素的边框是正确的，但顶部和底部的元素被切除，就像在标签div元素下方一样。

在此处输入图片说明

我给了我的canvas类以下属性：

.fitcanvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid black;    
}

目的是使画布填充剩余的区域（如果父项中没有其他内容，则填充为100％）。我尝试将其放在另一个div中，但无法使其正常工作。

我做错什么了？

Manasi Sakhare

在您的小提琴中，您给顶部和底部css类提供了11％的高度，但是对于其余的div，它使用了.content，其高度为26％。这使高度不均匀。您可以为所有人设定25％的身高。

您的标签与画布区域重叠，因为您已为其容器指定了100％的高度，并且该容器也包含标签。因此出现了问题。请在这里检查小提琴

CSS看起来像：

* {
    box-sizing: border-box;
}

html,
body,

.wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid black;    
}

.left,
.right {
    float: left;
}

.left {
    position: relative;
    width: 10%;
    height: 100%;
}

.left .label-top,
.left .label-bottom {
    position: absolute;
    width: 100%;
    background-color: #fff;
}

.left .label-top {
    top: 0;
    left: 0;
}

.left .label-bottom {
    bottom: 0;
    left: 0;
}

.left .content,
.left .top,
.left .bottom {
    border: 1px solid white;
}

.left .top,
.left .bottom {
    height: 25%;
}

.left .content {
    height: 25%;
}

.colourred {
    background-color: red;
}

.colourgreen{
    background-color: green;
}

.colourblue {
    background-color: blue;
}

.right {
    width: 85%;
    height: 100%;
    background-color: gray;
}

.right::after {
    content: '';
    display: table;
    clear: both;
}

.slider {

}

.fitcanvas {
    max-width: 100%;
    height: 100%;
    border: 1px solid black; 
    margin:1px;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。