Hoe voorkom ik meeschalen header en footer
Hoe kan ik dat voorkomen?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body, html, .page {
padding: 0;
margin: 0;
background-color: aqua;
box-sizing: border-box;
height: 100vh;
}
.page {
background-color: aquamarine;
width: 80%;
display: flex;
flex-direction: column;
margin: 0 auto;
border: 1px solid black
}
.header {
height: 130px;
/* width: 100%; */
padding: 0 25px 0;
background-color: coral;
border: 1px solid blue;
}
.container {
/* flex: 1 1 auto; */
display: flex;
flex-direction: column;
}
.bread-crumb {
height: 35px;
padding: 0 25px 0;
background-color: chocolate;
}
.inner-container {
display: flex;
padding: 0 25px 0;
flex-direction: row;
justify-content: space-between;
background-color: bisque;
border: 1px solid red;
}
.block-left-container{
width: 63%;
display: flex;
flex-direction: column;
background-color: chartreuse;
border: 1px solid red;
}
.block-left-body {
height: 80vh;
background-color: aquamarine;
border: 1px solid blue;
}
.block-left-foot {
height: 40px;
background-color: darkgray;
}
.block-right {
width: 34%;
height: 500px;
background-color: darkgray;
border: 1px solid red;
}
.footer {
height: 160px;
/* width: 100%; */
padding: 0 25px 0;
background-color: coral;
border: 1px solid blue;
}
</style>
<body>
<div class="page">
<div class="header">
Headare
</div>
<div class="container">
<div class="bread-crumb">
bread-crumb
</div>
<div class="inner-container">
<div class="block-left-container">
<div class="block-left-body">
block-left-body
</div>
<div class="block-left-foot">
block-left-foot
</div>
</div>
<div class="block-right">
block-right
</div>
</div>
</div>
<div class="footer">
Footare
</div>
</div>
</body>
</html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body, html, .page {
padding: 0;
margin: 0;
background-color: aqua;
box-sizing: border-box;
height: 100vh;
}
.page {
background-color: aquamarine;
width: 80%;
display: flex;
flex-direction: column;
margin: 0 auto;
border: 1px solid black
}
.header {
height: 130px;
/* width: 100%; */
padding: 0 25px 0;
background-color: coral;
border: 1px solid blue;
}
.container {
/* flex: 1 1 auto; */
display: flex;
flex-direction: column;
}
.bread-crumb {
height: 35px;
padding: 0 25px 0;
background-color: chocolate;
}
.inner-container {
display: flex;
padding: 0 25px 0;
flex-direction: row;
justify-content: space-between;
background-color: bisque;
border: 1px solid red;
}
.block-left-container{
width: 63%;
display: flex;
flex-direction: column;
background-color: chartreuse;
border: 1px solid red;
}
.block-left-body {
height: 80vh;
background-color: aquamarine;
border: 1px solid blue;
}
.block-left-foot {
height: 40px;
background-color: darkgray;
}
.block-right {
width: 34%;
height: 500px;
background-color: darkgray;
border: 1px solid red;
}
.footer {
height: 160px;
/* width: 100%; */
padding: 0 25px 0;
background-color: coral;
border: 1px solid blue;
}
</style>
<body>
<div class="page">
<div class="header">
Headare
</div>
<div class="container">
<div class="bread-crumb">
bread-crumb
</div>
<div class="inner-container">
<div class="block-left-container">
<div class="block-left-body">
block-left-body
</div>
<div class="block-left-foot">
block-left-foot
</div>
</div>
<div class="block-right">
block-right
</div>
</div>
</div>
<div class="footer">
Footare
</div>
</div>
</body>
</html>
Doe maar eens dit:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.page {
background-color: aquamarine;
width: 80%;
/*display: flex;*/
/*flex-direction: column;*/
margin: 0 auto;
border: 1px solid black
}
background-color: aquamarine;
width: 80%;
/*display: flex;*/
/*flex-direction: column;*/
margin: 0 auto;
border: 1px solid black
}