Toon posts:

[CSS]Height 100% geeft scrollbar

Pagina: 1
Acties:

vrijdag 8 juni 2007 09:28

Acties:
  • Roeligan
  • Registratie: December 2001
  • Laatst online: 22-07 11:37

Roeligan

Feyenoord

Topicstarter
Ik ben een blogsysteempje aan het proggen in xhtml en css. Nu heb ik body en html een height van 100% gegeven. Dit geeft echter een scrollbar omdat de hoogte 1 pixel te groot is (zie roeligan.kingsaregood.com)


Cascading Stylesheet:
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241

body, html {

        background-color: #CCCCCC;

        width: 100%;

        height: 100%;

        overflow: auto;

        margin-left: auto;

        margin-right: auto;

        margin-top: 0px;

        margin-bottom: 0px;

        text-align: center;

        font-family: Verdana;

        font-size: 8pt;

        background-image: url(../img/background.jpg);}

        

a:link, a:visited, a:active {

        color: #000000;

        text-decoration: none;}



a:hover {

        font-weight: bold;}



input, select, textarea {

        font-size: 8pt;

        font-family: Verdana;

        background-color: #BBBBBB;

        border-collapse: collapse;

        border-style: solid;

        border-width: 1px;

        border-color: #000000;}



.screen {

        background-color: #FFFFFF;

        text-align: center;

        height: 100%;

        width: 990px;

        margin-left: auto;

        margin-right: auto;

        margin-top: 0px;

        margin-bottom: 0px;

        border-collapse: collapse;

        border-style: solid;

        border-width: 1px;

        border-color: #000000;

        font-size: 8pt;

        background: #FFFFFF url(../img/screen_background.jpg) 720px 0px repeat-y;}



.header {

        height: 100px;

        background-color: #BBBBBB;

        background-repeat: no-repeat;

        /*background-image: url(../img/logo.png);*/

        cursor: pointer;}



.menu {

        background-color: #cfdcff;

        height: 30px;

        border-collapse: collapse;

        border-width: 1px;

        border-color: #000000;

        border-top-style: solid;

        border-bottom-style: solid;

        font-size: 8pt;}



#menu ul {

        margin: 0px;

        padding: 0px;}



#menu li {

        float:  left;

        width: 100px;

        margin: 0px;

        padding: 10px;

        list-style-type: none;

        white-space: nowrap;}



.pods {

        float: right;

        width: 240px;

        border-collapse: collapse;

        border-style: solid;

        border-width: 1px;

        border-color: #afc7fb;

        font-size: 8pt;

        margin-right: 10px;}

        

.entryContainer {

        float: left;

        width: 690px;

        border-collapse: collapse;

        border-style: solid;

        border-width: 1px;

        border-color: #afc7fb;

        font-size: 8pt;

        margin-left: 10px;}



.entryHeader {

        height: 60px;

        background-image: url(../img/entry_header.jpg);

        text-align: left;

        padding-left: 10px;

        padding-right: 10px;

        color: #6699ff;}



.entryBody, .entryFooter {

        text-align: left;

        padding: 10px;}



.entryFooter {

        border-collapse: collapse;

        border-width: 1px;

        border-color: #afc7fb;

        border-top-style: dashed;

        font-size: 8pt;

        padding-left: 10px;}



.footer {

        height: 15px;

        background-color: #BBBBBB;

        font-size: 8pt;

        color: #000000;

        vertical-align: middle;}


HTML:
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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index,follow" />
    <meta name="description" content="Poker, Kings are good" />
    <meta name="keywords" content="no limit, poker, texas hold'em" />
    <meta name="author" content="R.E. 'Roeligan' van der Hoeven" />

    <link rel="stylesheet" href="common/style.css" type="text/css" />
    
        <base href="http://roeligan.kingsaregood.com/" />
    
</head>

<body>
    <div class="screen">
        <div class="header" onclick="document.location.href='index.cfm?fusaction=/roeligan.frontpage';"></div>
        <div class="menu" id="menu">
            <ul>
                <li>Home</li>

                <li>Archives</li>
            </ul>
        </div>
        <div class="height10"></div>
        <div class="pods">pods</div>
        <div>

        

<div class="entryContainer">

    <div class="entryHeader">
        <br /><a href="index.cfm?fusaction=blog.readEntry&amp;entry=entryID">entryTitle</a>
        <br />
        <img src="img/interface/calendar.png" alt="Posted @" title="Posted @" /> Friday,  08 June, 2007 |   <img src="img/interface/category.png" alt="Catergory" title="Category" /> Category: cats
    </div>
    <div class="entryBody">
        Body
    </div>

    <div class="entryFooter">
        <img src="img/interface/comments.png" alt="Comments" title="Comments" /> [x] Comments | <img src="img/interface/print.png" alt="Print this entry" title="Print this entry" /> Print | <img src="img/interface/views.png" alt="Viewed [x] times" title="Viewed [x] times" /> [x] views
    </div>
</div>



    
</div>
        <br />      
    </div>

</body>

</html>


Wat zie ik over het hoofd?

A real man fears not mortality for it's death, he fears mortality for it's lack of life!
RatPack #814

vrijdag 8 juni 2007 09:31

Acties:
  • DemonTPx
  • Registratie: December 2002
  • Laatst online: 27-10 15:40

DemonTPx

Ik zou het - na even snel gekeken te hebben - gokken op de height en border in .screen

vrijdag 8 juni 2007 09:32

Acties:
  • Pin0
  • Registratie: November 2002
  • Niet online

Pin0

In je .screen heb je een hoogte van 100% en een border van 1pixel... misschien is dat het?

[ Voor 1% gewijzigd door Pin0 op 08-06-2007 09:33 . Reden: doh... Demon ]

Mijn Lego Mocs - LEGO idea: The Motorcycle Garage

vrijdag 8 juni 2007 09:37

Acties:
  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 19-10 08:18

BasieP

mag ik vragen waarom je een border-collapse (een table property) op een divje toepast?

This message was sent on 100% recyclable electrons.

vrijdag 8 juni 2007 09:45

Acties:
  • Roeligan
  • Registratie: December 2001
  • Laatst online: 22-07 11:37

Roeligan

Feyenoord

Topicstarter
Ik heb de css snel gepikt van een ander projectje (deed eerst alles in nested tables, wil het nu een keer goed doen). Ik zal het er strax uitslopen :+

[edit]
Idd is die border het probleem, al weet ik niet hoe ik dan over de volledige hoogte een border moet krijgen. Vogel wel wat vanaaf, thx iig :)

[edit2]
Wat ik dan wel weer vreemd vindt is dat ik maar 1 pixel te groot ben ipv 2 (als de border na de 100% height zou komen)

[ Voor 50% gewijzigd door Roeligan op 08-06-2007 10:03 ]

A real man fears not mortality for it's death, he fears mortality for it's lack of life!
RatPack #814

vrijdag 8 juni 2007 20:49

Acties:
  • Roeligan
  • Registratie: December 2001
  • Laatst online: 22-07 11:37

Roeligan

Feyenoord

Topicstarter
Ander probleempje...

Als ik veel content heb op de pagina, krijg ik een scrollbar in mijn "screen" div, kan ik ervoor zorgen dat deze erbuiten valt (de gewone scrollbar ipv in/buiten een div)

Cascading Stylesheet:
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
114
115
116
117
118
119
120
121
122
123

body, html {
        background-color: #CCCCCC;
        width: 100%;
        height: 100%;
        overflow: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        margin-bottom: 0px;
        text-align: center;
        font-family: Verdana;
        font-size: 8pt;
        background-image: url(../img/interface/background.jpg);}
        
a:link, a:visited, a:active {
        color: #000000;
        text-decoration: none;}

a:hover {
        font-weight: bold;}

input, select, textarea {
        font-size: 8pt;
        font-family: Verdana;
        background-color: #BBBBBB;
        border-style: solid;
        border-width: 1px;
        border-color: #000000;}

.screen {
        overflow: auto;
        background-color: #FFFFFF;
        text-align: center;
        height: 100%;
        width: 990px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        margin-bottom: 0px;
        border-width: 1px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: #cfdcff;
        font-size: 8pt;
        background: #FFFFFF url(../img/interface/screen_background.jpg) 720px 0px repeat-y;}

.header {
        height: 100px;
        background-color: #BBBBBB;
        background-repeat: no-repeat;
        /*background-image: url(../img/logo.png);*/
        cursor: pointer;}

.menu {
        background-color: #e8eeff;
        height: 30px;
        border-width: 1px;
        border-color: #afc7fb;
        border-top-style: solid;
        border-bottom-style: solid;
        font-size: 8pt;}

#menu ul {
        margin: 0px;
        padding: 0px;}

#menu li {
        float:  left;
        width: 100px;
        margin: 0px;
        padding: 10px;
        list-style-type: none;
        white-space: nowrap;}

.pods {
        float: right;
        width: 240px;
        border-style: solid;
        border-width: 1px;
        border-color: #afc7fb;
        font-size: 8pt;
        margin-right: 10px;}
        
.entryContainer {
        float: left;
        width: 690px;
        border-style: solid;
        border-width: 1px;
        border-color: #afc7fb;
        font-size: 8pt;
        margin-left: 10px;
        margin-bottom: 20px;}

.entryHeader {
        height: 60px;
        background-color: #e8eeff;
        text-align: left;
        padding-left: 10px;
        padding-right: 10px;
        color: #6699ff;}

.entryBody, .entryFooter {
        text-align: left;
        padding: 10px;}

.entryFooter {
        border-width: 1px;
        border-color: #afc7fb;
        border-top-style: dashed;
        font-size: 8pt;
        padding-left: 10px;}

.footer {
        width: 990px;
        height: 30px;
        background-color: #e8eeff;
        font-size: 8pt;
        color: #000000;
        margin: 0 auto;
        margin-top: -31px;
        border-width: 1px;
        border-color: #afc7fb;
        border-top-style: solid;}


HTML:
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
114
115
116
117
118
119

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index,follow" />
    <meta name="description" content="Poker, Kings are good" />
    <meta name="keywords" content="no limit, poker, texas hold'em" />
    <meta name="author" content="R.E. 'Roeligan' van der Hoeven" />

    <link rel="stylesheet" href="common/style.css" type="text/css" />
    
        <base href="http://127.0.0.1:8500/dev/roeligan.kingsaregood/" />
    
</head>

<body>
    <div class="screen">
        <div class="header" onclick="document.location.href='index.cfm?fusaction=/roeligan.frontpage';"></div>
        <div class="menu" id="menu">
            <ul>
                <li>Home</li>

                <li>Archives</li>
            </ul>
        </div>
        <div class="height10"></div>
        <div class="pods">pods</div>
        <div>

        

<div class="entryContainer">

    <div class="entryHeader">
        <br /><a href="index.cfm?fusaction=blog.readEntry&amp;entry=entryID">entryTitle</a>
        <br />
        <img src="img/interface/calendar.png" alt="Posted @" title="Posted @" /> Friday,  08 June, 2007 |   <img src="img/interface/category.png" alt="Catergory" title="Category" /> Category: cats
    </div>
    <div class="entryBody">
        Body
    </div>

    <div class="entryFooter">
        <img src="img/interface/comments.png" alt="Comments" title="Comments" /> [x] Comments | <img src="img/interface/print.png" alt="Print this entry" title="Print this entry" /> Print | <img src="img/interface/views.png" alt="Viewed [x] times" title="Viewed [x] times" /> [x] views
    </div>
</div>

<div class="entryContainer">
    <div class="entryHeader">
        <br /><a href="index.cfm?fusaction=blog.readEntry&amp;entry=entryID">entryTitle</a>

        <br />
        <img src="img/interface/calendar.png" alt="Posted @" title="Posted @" /> Friday,  08 June, 2007 |   <img src="img/interface/category.png" alt="Catergory" title="Category" /> Category: cats
    </div>
    <div class="entryBody">
        Body
    </div>
    <div class="entryFooter">
        <img src="img/interface/comments.png" alt="Comments" title="Comments" /> [x] Comments | <img src="img/interface/print.png" alt="Print this entry" title="Print this entry" /> Print | <img src="img/interface/views.png" alt="Viewed [x] times" title="Viewed [x] times" /> [x] views
    </div>

</div>

<div class="entryContainer">
    <div class="entryHeader">
        <br /><a href="index.cfm?fusaction=blog.readEntry&amp;entry=entryID">entryTitle</a>
        <br />
        <img src="img/interface/calendar.png" alt="Posted @" title="Posted @" /> Friday,  08 June, 2007 |   <img src="img/interface/category.png" alt="Catergory" title="Category" /> Category: cats
    </div>
    <div class="entryBody">

        Body
    </div>
    <div class="entryFooter">
        <img src="img/interface/comments.png" alt="Comments" title="Comments" /> [x] Comments | <img src="img/interface/print.png" alt="Print this entry" title="Print this entry" /> Print | <img src="img/interface/views.png" alt="Viewed [x] times" title="Viewed [x] times" /> [x] views
    </div>
</div>

<div class="entryContainer">
    <div class="entryHeader">

        <br /><a href="index.cfm?fusaction=blog.readEntry&amp;entry=entryID">entryTitle</a>
        <br />
        <img src="img/interface/calendar.png" alt="Posted @" title="Posted @" /> Friday,  08 June, 2007 |   <img src="img/interface/category.png" alt="Catergory" title="Category" /> Category: cats
    </div>
    <div class="entryBody">
        Body
    </div>
    <div class="entryFooter">

        <img src="img/interface/comments.png" alt="Comments" title="Comments" /> [x] Comments | <img src="img/interface/print.png" alt="Print this entry" title="Print this entry" /> Print | <img src="img/interface/views.png" alt="Viewed [x] times" title="Viewed [x] times" /> [x] views
    </div>
</div>

<div class="entryContainer">
    <div class="entryHeader">
        <br /><a href="index.cfm?fusaction=blog.readEntry&amp;entry=entryID">entryTitle</a>
        <br />

        <img src="img/interface/calendar.png" alt="Posted @" title="Posted @" /> Friday,  08 June, 2007 |   <img src="img/interface/category.png" alt="Catergory" title="Category" /> Category: cats
    </div>
    <div class="entryBody">
        Body
    </div>
    <div class="entryFooter">
        <img src="img/interface/comments.png" alt="Comments" title="Comments" /> [x] Comments | <img src="img/interface/print.png" alt="Print this entry" title="Print this entry" /> Print | <img src="img/interface/views.png" alt="Viewed [x] times" title="Viewed [x] times" /> [x] views
    </div>

</div>


    
</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>


Ook te zien: http://roeligan.kingsaregood.com

A real man fears not mortality for it's death, he fears mortality for it's lack of life!
RatPack #814

vrijdag 8 juni 2007 22:51

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

die 'screener' div heb je een vast breedte en hoogte gegeven en vervolgens de overflow op auto gezet. dat levert uiteraard het effect op dat je daar scrollbars krijgt
als je wil dat de div meerekt dan moet je 'm gewoon geen vaste waarden geven
Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq