div треугольник, размер холста

Question

In this JSFiddle example Я сделал макет экрана с помощью div и css, а затем добавил элемент холста внутри каждого региона с черной рамкой, чтобы я мог видеть его размер.

На этом скриншоте вы можете видеть, что границы правильны для 3 основных элементов левой боковой панели, но верхний и нижний элементы отрезаны, как будто под элементом div метки.

Я дал мой класс холст следующие свойства:

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

Намерение для холста, чтобы заполнить область оставшейся (или 100%, если нет ничего другого в родительском) , Я попытался поместить его в другой div, но не могу заставить его работать правильно.

Что я сделал не так?

Answer 1

В вашей скрипке вы дали 11% высоты сверху и снизу класса css, но для остальных divs он использовал .content, который составляет 26% высоты. Это делает высоты неровными. Вы можете дать 25% всем, чтобы сделать их одинаковой высоты.

Ваши метки перекрывают область вашего холста, потому что вы дали высоту 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; 
}