• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS "100%" Height

=Max=

=Max=

Neues Mitglied
Hallo,

und zwar habe ich in HTML folgendes:

Code: 
 <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
 
Werbung:
Setze im CSS den Standard für Innen und außenabstand erstmalmal auf null
Code: 
*
{
     margin:0px;
     padding0px;
}

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

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

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
 <html lang="de">
  <head>
    <title>deine-seite.net | Deine Homepage - kostenlos</title>
    
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/de.css" />
  </head>
  
  <body>
    <div class="stripe_top">
      <div align="center">
       <div class="stick">
         <div class="logo"></div>
       </div>
      </div>
    </div>
    <div class="mid"></div>
    <div class="stripe_bottom"></div>
  </body>
 </html>
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;
}
Und hier zur Verständnis:
seitescreen.png
 

Anhänge

  • SEITE_SCREEN.gif
    SEITE_SCREEN.gif
    13,3 KB · Aufrufe: 3
Werbung:
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
 
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!
 
Werbung:
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!
 
Habe das Problem jetzt mit Hilfe von jemandem lösen können:

bei .stripe_bottom habe ich das geschrieben:
Code: 
position: relative;
left: 0px;
right: 0px;
bottom: 0px;
 
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
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben