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?
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;
}
}