div三角形，画布尺寸

Question

In this JSFiddle example我使用div和css制作了一个屏幕布局，然后在每个区域中添加了一个带有黑色边框的画布元素，以便我可以看到它的范围。

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

我给了canvas类以下属性：

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

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

我做错了什么？

Answer 1

在你的小提琴中，你给了顶部和底部css类11％的高度，但是对于剩下的div，它使用了.content，它的高度为26％。这使得高度不均匀。您可以给予所有人25％的相同高度。

您的标签与您的画布区域重叠，因为您在其容器上为画布w.r.t提供了100％的高度，并且容器也包含标签。因此问题。请检查fiddle here

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