Hoe voorkom ik meeschalen header en footer

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan Kila

Jan Kila

13/06/2022 18:07:24
Quote Anchor link
In de volgende code schalen de header en de footer mee wanneer ik de viewport verticaal verklein.
Hoe kan ik dat voorkomen?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
PHP hulp

PHP hulp

16/08/2022 08:32:14
 
Jan Koehoorn

Jan Koehoorn

14/06/2022 21:21:19
Quote Anchor link
Dat komt omdat je je .page class op display: flex; en flex-direction: column; hebt gezet.

Doe maar eens dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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
}
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.