Layout in % trotzdem bei verschiedenen Auflösung anders

Status
Nicht offen für weitere Antworten.
B

ByeBye 31659

Hallo,

ich habe mich mal an einem Layout in CSS und in Prozenangaben versucht. Leider ist das Ergebnis bei verschiedenen Auflösungen unterschiedlich. Bei 1280x1024 wird es vollständig und wie gewünscht dargestellt. Bei 1024x768 muss man leider scrollen.

Kann mir jemand sagen woran das liegt oder was ich falsch mache? Hier mein Quellcode

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
         	<style type="text/css" media="screen">
	                  body
	                  {
	                          margin: 0;
	                          padding: 0;
	                          font: 85% arial, hevetica, sans-serif;
	                          text-align: center;
	                          color: #505367;
	                          background-color: #D6D6D6;
	                  }

	                  #page
	                  {
	                          margin: auto;
	                          width: 952px;
	                          text-align: left;
	                          background-color: red;
                                   height: 100%;
	                          border: 1px solid black;
	                  }

	                  #header
	                  {
	                          height: 17.00%;
	                          background-color: fuchsia;
	                  }

	                  #mainnav
	                  {
                           	  border-top: 1px solid black;
                                   border-bottom: 1px solid black;
	                          height: 6.00%;
	                          background-color: green;
	                  }

	                  #menu
	                  {
                           	  float : left;
                           	  margin-top: 1.70%;
                                   margin-left: 10px;
                                   margin-right: 10px;
                                   margin-bottom: 1.70%;
                                   width: 140px;
	                          height: 70.00%;
	                          background-color: yellow;
                                   overflow:auto
	                  }

	                  #content
	                  {
                                   float: left;
                                   margin-top: 1.70%;
                                   margin-left: 0px;
                                   margin-right: 0px;
                                   margin-bottom: 1.70%;
	                          height: 70.00%;
                                   width: 580px;
	                          background-color: aqua;
                                   overflow:auto
	                  }

                           #help
	                  {
                           	  float : left;
                           	  margin-top: 1.70%;
                                   margin-left: 10px;
                                   margin-right: 10px;
                                   margin-bottom: 1.70%;
                                   width: 190px;
	                          height: 70.00%;
	                          background-color: yellow;
                                   overflow:auto
	                  }

	                  #footer
	                  {
                           	  border-top: 1px solid black;
	                          clear: both;
	                          height: 3.5%;
	                          background-color: lime;
	                  }

	         </style>
         </head>
	<body>
         	<div id="page">
                 	 <div id="header">Header</div>
	                 <div id="mainnav">MainNav</div>
	                 <div id="menu">Menu</div>
	                 <div id="content">Content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>jlkhlkj</div>
                          <div id="help">Help</div>
                          <div id="footer">Footer</div>
		</div>
         </body>
</html>

Vielen Dank im Voraus.
 
Ich vermute, daß es einfach an den Regeln für das Boxmodell liegt, nach denen der Rahmen zur Breiten- und Höhenangabe eines Elements hinzuaddiert wird, und so der vertikale Viewport des Browserfensters überschritten wird.

Denn selbst bei einer Auflösung von 1280*1024px kann ich die Seite um wenige Pixel nach unten scrollen - eben um das Maß, das sich aus den einzelnen Rahmenangaben ergibt.
 
Hallo,

schon mal probiert die DIVS menu, content und help in ein zusätzliches DIV zu schachteln? Hab mir das Ganze mal in IE 6 angeschaut - da gibts noch ein paar kleine Kompatibilitätsproblemchen ;-)

Prozentuale height Angaben machen immer so ihre Probleme - die Erfahrung habe ich schon gemacht. Wobei mit Doctype HTML 4.0 eigentlich soweit alles funktionieren müsste...

Bei kleinerer Auflösung erscheint bei mir in Firefox auch immer ne vertikale scrollbar (für gerade mal 1 od. 2 px scrollen) - da sehe ich aber weniger das problem. kann man ja mit overflow:hidden vermeiden.

Grüße
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück