Responsive Höhe

akdesign

Erfahrenes Mitglied
Hallo,

ich bin gerade dabei, meine bestehende Web neu aufzubauen auf responsive.
Nun habe ich das Problem, sobald ich meine Main Div einfüge, die Höhe nicht mehr stimmt und ein Scrollbalken entsteht - warum ist mir unerklärlich.
Zur besseren Veranschaulichung habe ich dem Main mal eine Hintergrundfarbe zugewiesen.

Hat jemand eine Idee, woher die Höhe kommt, wo versteckt sich der Fehler?

HTML:
<body>

    <div id="wrapper">
       
        <header><img src="images/logo.png" class="logo"></header>
       
        <main>
           
        </main>
   
       
    </div>
   
</body>

CSS:
html, body {
    background-color: #00131b;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 100%; /*wichtig, für die sich daran ausrichtenden anderen Schriftgrößen > in der Regel 16px >> 1em = 16px >> 1.5em = 24:16 >> 1.5 x 16 = 24*/
    line-height: 130%;
    border-width: 0px;
    font-style: normal;
    /*color: aqua;*/
}

#wrapper    {   /*Gesamt content*/
    width: 100%;
    max-width: 1366px; /*hier bleibt Angabe in px >> alle anderen Werte dann in %*/
    /*height: 830px;*/
    margin: 0 auto 0 auto; /* für horizontale Zentrierung */
    /*position:  absolute;*/
    /*background-color: aqua;*/
}

header    {  /*= Logo*/
    width: 100%;
    height: 100px;
    /*background-color: antiquewhite;*/
}

.logo    {
    padding: 20px 0px 0px 0px;
    height: auto;
    float: right;
}

.logo_start    {
    float: right;
    padding: 10px 0px 0px 0px;
    height: 80%;
}

main    {
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    max-width:100%;
    height: 660px;
    margin: 0;
    clear: right;
}


/*Mobile Version - Tablet*/

@media only screen and (max-width: 1024px)    {

   
#wrapper    {   /*Gesamt content*/
    max-height:100%;
}

header    {  /*= Logo*/
    width: 100%;
    height:auto;
}
   
.logo    {
    max-width: 60%;
    padding-top: 1%;
    padding-bottom: 0.5%;
}
   
main    {
    background-image: url(images/background_mobil.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: aqua;
    max-height: 100%;
    margin: 0;
    padding: 0;
}

}
 
Hallo

Ein Problem dir zu helfen ist, dass du uns wahrscheinlich wesentliche Angaben vorenthälst.

Die Höhe entsteht durch deine height-Angaben.

Auf height-Angaben sollte grundsätzlich verzichtet werden. Die Höhe von Elementen wird durch ihren Inhalt bestimmt.

Gruss

MrMurphy
 
Hallo,

Auf height-Angaben sollte grundsätzlich verzichtet werden. Die Höhe von Elementen wird durch ihren Inhalt bestimmt.

Na ja, das Komische ist nur, wenn ich im Main die Höhenangabe weglasse, zeigt's mir mein Background image nicht an???
Gibt es dafür eine Erklärung?
 
Hallo

In deinem Quelltext hat das main-Element keinen Inhalt, also auch keine eigene Höhe.

Wenn das Bild wichtig für die Seite ist, ist es als background-image auch falsch eingebunden. Hintergrundbilder dienen nur der Verschönerung und können auch weggelassen werden. Von daher stört es auch überhaupt nicht wenn sie ohne Inhalt nicht angezeigt werden.

Die Zeiten, in denen konkrete Hintergrundbilder verwendet werden, sind auch bereits längere Zeit vorbei. Bei kleineren Ausgabebergeräten wie Smartphones sind die durch Überdeckung durch den Inhalt in der Regel nicht zu sehen und verursachen unnötigen Traffic.

Ist das Bild wichtig ist für die Einbindung das img-Element gedacht.

Gruss

MrMurphy
 
Hast du dieses hier beachtet was deinen main-Tag angeht?
Quelle: https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/main

Zudem gibst du main eine maximal Höhe von 100%.
Kein Inhalt = keine Höhe.
Du kannst aber mit min-height arbeiten.

Auf das reine height sollte man bestmöglich verzichten. ;)
min-height ist für "keinen Inhalt" aus meiner Sicht ein gelungenes Attribute welches bei mir recht oft zur verwendung kommt. :)
 

Neue Beiträge

Zurück