Пока я не добавил код JS, высота блока была 100%, после добавления кода цвет не выходит за рамки. Как это исправить? https://i.stack.imgur.com/4saaF.png Я пробовал добавить высоту 100% ко всем элементам. Но это не помогает. Стек не дает мне его выпустить. Так что я просто напишу здесь бессмысленный текст, извините
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="main">
<div id="header">
</div>
<div id="menuLeft">
<p
v-for="tab in tabs"
v-bind:key="tab"
v-bind:class="['tab-button', { active: currentTab === tab }]"
v-on:click="currentTab = tab">
{{ tab }}
</p>
<component v-bind:is="currentTabComponent" class="tab"></component>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#header {
position: relative;
width: 100%;
height: 50px;
background-color: rgba(52, 73, 94,1.0);
}
#menuLeft {
position: relative;
height: 300%;
width: 220px;
background-color: rgba(44, 62, 80,1.0);
}
.tab-button {
position: relative;
color: #ecf0f1;
height: 100%;
}
.tab-button.active {
position: relative;
background-color: #34495e;
height: 100%;
}
.height {
position: relative;
height: 100%;
}
JS:
Vue.component("tab-home", {
template: "<div>Home component</div>"
});
Vue.component("tab-posts", {
template: "<div>Posts component</div>"
});
Vue.component("tab-archive", {
template: "<div>Archive component</div>"
});
new Vue({
el: "#menuLeft",
data: {
currentTab: "Home",
tabs: ["Home", "Posts", "Archive"]
},
computed: {
currentTabComponent: function() {
return "tab-" + this.currentTab.toLowerCase();
}
}
});