CSS "100%" Height

html.de-Forum HTML, XHTML & CSS
1

Hallo,

und zwar habe ich in HTML folgendes:

 <div class="stripe_top"></div>
 <div class="mid"></div>
 <div class="stripe_bottom"></div>

html und body habe ich beidem eine Höhe von „height: 100%;“ gegeben. .mid hat ebenfalls height: 100%;. stripe_top und stripe_bottom haben beide eine feste Höhe. Wenn ich meine Seite jetzt aufrufe, dann erscheinen Scrollbalken an der Seite. Der „Überschuss“ ist genau der Teil, den stripe_top und stripe_bottom als Höhe haben. Wie kann ich machen, dass mid so hoch ist, wie die „Fensterhöhe ohne Scrollbalken“ und ohne stripe_top und stripe_bottom, damit keine Scrollbalken erscheinen?

Danke und Samstagsgrüße,
Max

2

Setze im CSS den Standard für Innen und außenabstand erstmalmal auf null

*
{
     margin:0px;
     padding0px;
}

Als Standard sind immer Abstände, die muss man daher auf null setzen, sonst wird die Seite zu groß.

MfG

3

Daran liegt es nicht, ich zeige mal den Code, zur verständnis:

[CODE]

deine-seite.net | Deine Homepage - kostenlos 
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/de.css" />

[/CODE][CODE]body
{
font-family: Arial;
font-size: 12px;
background-color: #FFF;
margin: 0px;
padding: 0px;

height: 100%;
width: 100%;
}

{
padding: 0px;
margin: 0px;
}

html
{
height: 100%;
width: 100%;
}

.stripe_bottom
{
height: 57px;
width: 100%;
background-image: url(…/images/temp/stripe_bottom.png);
}

.stripe_top
{
height: 127px;
width: 100%;
background-image: url(…/images/temp/stripe_top.png);
}

.mid
{
height: 100%;
}

.stick
{
width: 900px;
text-align: left;
}

.logo
{
width: 257px;
height: 95px;
float: left;
margin-top: 10px;
}[/CODE]Und hier zur Verständnis:
http://img44.imageshack.us/img44/899/seitescreen.png

4

bin zwar nich der super css-freak aber pack doch ma alles , also dein top_stripe deinen content zwischen drin und den bottom_stripe in ein div und setz das div auf 100% und deinen content auf auto

5

Habe ich gemacht, jetzt sind stripe_top und stripe_bottom einfach untereinander.

6

ja da muss dann halt noch inhalt rein dann wird dein content der auf auto is auch wachsen! probiers mal aus…

ansonsten weiss ich leider auch nicht weiter!

7

Jaklar, er wächst mit dem Content, aber er ist nicht so hoch wie der Teil, wo nichts ist. Vielleicht habe ich es unglücklich formuliert: ich will quasi: stripe_top am oberen Bildschirmrand (bzw. Browserrand) und stripe_bottom am unteren „Browserrand“. Und dazwischen soll Content rein!

8

Habe das Problem jetzt mit Hilfe von jemandem lösen können:

bei .stripe_bottom habe ich das geschrieben:

position: relative;
left: 0px;
right: 0px;
bottom: 0px;
9

Ich habe es doch nicht gelöst. Wenn ich den Content rausmache bzw. wieder zu wenig content drin ist, dann ist der Balken wieder oben :S

10

Layout mit 100 % Höhe bei fixiertem Header und Footer