css - div 三 Angular 形， Canvas 大小

Question

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

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

我已经为我的 Canvas 类提供了以下属性:

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

目的是让 Canvas 填充剩余区域(如果父级中没有其他区域，则为 100%)。我试过将它放在另一个 div 中，但无法使其正常工作。

我做错了什么？

Answer 1

在您的 fiddle 中，您为顶部和底部的 css 类提供了 11% 的高度，但对于其余的 div，它使用了 .content，其高度为 26%。这使高度不均匀。你可以给所有人 25% 来使他们的高度相同。

您的标签与您的 Canvas 区域重叠，因为您已经为 Canvas 提供了 100% 的高度 w.r.t 其容器，并且容器也包含标签。因此问题。请查看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;
}