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

3-Spalten Modell Höhe einstellen

Status
Für weitere Antworten geschlossen.

naeooo

Mitglied
Hi,

hab ein 3-Spalten-Modell und wollte die Höhe der linken und rechten Spalte durch % einstellen, aber das funktioniert nicht. Das Einstellen der Höhe mit px funktioniert hingegen schon..woran kann das liegen?

Code:

Code:
<!DOCTYPE html>

<html>
    <head>
        <title>Mein Hotel</title>
        <link rel ="stylesheet" type="text/css" href="Css/Style-Homepage.css"/>
       
        <!-- Start WOWSlider.com HEAD section -->
            <link rel="stylesheet" type="text/css" href="engine1/style.css" />
            <script type="text/javascript" src="engine1/jquery.js"></script>
        <!-- End WOWSlider.com HEAD section -->
       
    </head>
   
    <body>
        <link href='https://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
        <div id="links"><img src="Bilder/Hotel_Logo.png" alt=""></div>
        <div id="rechts"><img src="Bilder/Hotel_Logo.png" alt=""></div>
     </body>

</html>

Code css:

Code:
#links {
    height: 100%;
    background-color: #848484;
    width: 220px;
    float: left;
   
}
   
#rechts {
    height: 100%;
    background-color: #848484;
    width: 220px;
    float: right;
   
}

Durch die 100% müsste es doch bis an den unteren Rand der Seite oder?
 
Werbung:
Hallo

Durch die 100% müsste es doch bis an den unteren Rand der Seite

Prozent-Angaben beziehen sich immer auf das Elternelement.

Heißt in deinem Fall: #links und #rechts werden also mit 100% so hoch wie der body. body würde mit 100% so hoch wie das html-Element. Das html-Element ist das äußerste Element. Du musst also body und html auch auf 100% Höhe setzen.

Außerdem musst du berücksichtigen was passiert, wenn der Inhalt eines der drei Container höher als die Fensterhöhe wird.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hallo



Prozent-Angaben beziehen sich immer auf das Elternelement.

Heißt in deinem Fall: #links und #rechts werden also mit 100% so hoch wie der body. body würde mit 100% so hoch wie das html-Element. Das html-Element ist das äußerste Element. Du musst also body und html auch auf 100% Höhe setzen.

Außerdem musst du berücksichtigen was passiert, wenn der Inhalt eines der drei Container höher als die Fensterhöhe wird.

Gruss

MrMurphy
Ok, danke :)
 
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben