CSS Phantom-Footer und 2 Scroll-bars

[koffi]

hallo!

da treibt mich etwas in den wahnsinn..

ich habe mich von einem footer (fußzeile) auf meiner website verabschiedet. ich habe die div gelöscht und alle zugehörigen css teile davon.
nun erscheinen aber mit opera 2 vertikale (hoch-runter) scroll-bars nebeneinander am rechten bildschirmrand. unter firefox nicht! der scrollbare bereich entspricht der höhe des ehem. footers (den ich ja entfernt habe), könnte aber auch die höhe der kopfzeile ("bar") sein. ich vermute eine scrollbar ist für "content", die andere für den gesamten body. die rechte scrollbar läuft erst runter, wenn die linke am ende ist.
ich verstehe nicht warum das so ist. ich habe alle bottom-margins aus der css gelöscht, height immer auf 100%. die seite hat auch nicht genug inhalt, um eine scrollbar anzeigen zu müssen.
es muss da etwas vom footer übrig geblieben sein, das ich übersehe...

hier die css

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
	font-size: 13px;
}
ul {
	padding: 0px;
	margin: 0px;
	white-space: nowrap;
}
a {
	text-decoration: none;
	color: #fff;
}
a:hover {
	cursor: pointer;
}
h1{
	font-size: 14px; 
}
h2{
	font-size: 14px; 
}
#midcon_content{
	padding-left: 5px;
}
.content {
	min-height: 100%;
	position: relative;
	overflow: auto;
	z-index: 0;
}

.background {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
}

.top_block {
	width: 100%;
	display: block;
}


.left_block {
	display: block;
	float: left;
}

.right_block {
	display: block;
	float: right;
}

.center_block {
	display: block;
	width: auto;
}

.bar {
	width: 100%;
	height: 38px;
	/*background-color: #000;*/
	background-image: linear-gradient(to bottom, #404040, #101010);
	font-size: 13px;
	color: #fff;
	font-weight: bold;
}
.bar ul li {
	display: inline-block;
	list-style: none outside none;
	padding: 0px;
	margin: 0px;
}

.background.left {
	height: auto !important;
	padding-bottom: 0;
	left: 0;
	width: 167px;
	background-color: #fff;
	margin-top: 38px;
}

.left {
	height: auto;
	width: 167px;
	padding-bottom: 32px;
}

.background.navigation {
	height: auto !important;
	padding-bottom: 0;
	left: 0;
	width: 172px;
	/*background-color:#9966ff;*/
	background-image: linear-gradient(to right, #9966ff, #fff);
	margin-top: 38px;
	margin-left: 167px;
}

.navigation {
	height: auto;
	width: 172px;
	padding-bottom: 32px;
	font-size: 13px;
	color: #fff;
	font-weight: bold;
	padding-left:5px;
}
.navigation a {
	font-size: 13px;
	color: #000;
	font-weight: bold;
}
.navigation ul li {
	list-style: none outside none;
	padding: 0px;
	margin: 0px;
}

.background.right {
	height: auto !important;
	padding-bottom: 0;
	right: 0;
	width: 70px;
	background-color: #9966ff;
	margin-top: 38px;
}

.right {
	height: auto;
	width: 70px;
	padding-bottom: 32px;
}

.inner {
	padding: 12px 0px 0px 0px;
}
#innerr {
	padding: 0px 0px 0px 12px;
}
#innerrr {
	padding: 0px 0px 0px 24px;
}
#logo {
	margin: 14px 50px 0px 170px;
	font-size: 18px;
}
#logo a:hover {
	color: #660066;
}
#bar_menu {
	padding: 0px 12px 0px 0px;
}
#bar_menu a:hover {
	color: #663399;
}
.navigation a:hover {
	color: #660000;
}
.subjects a{
	font-weight:normal;
}
#files_table td{
	padding: 4px;
}
#files_table table{
	/*width:1170px;*/
	margin: 0px 70px 70px 24px;
}
.tableuploader{
	white-space: nowrap;
}
#files_table a{
	color: #000;
}
#files_table tr:hover td {
	cursor: pointer;
	color: #660000;
}
#files_table tr:hover a {
	cursor: pointer;
	color: #660000;
}
.tablename{
	min-width: 500px;
}
.tabledescription{
	min-width: 500px;
}
.tableuploader{
	text-align:center;
}
.tabledate{
	text-align:center;
}
.row_color1{
	background: #bdbdbd;
}
.row_color2{
	background: #E0E0E0;
}
.add_button{
	float:right;
}
.anonymous_check{
	float:left;
	padding-left: 0px;
	margin-left: 0px;
}
#upload_feedback{
	color: red;
	font-weight: bold;
}
.statistic{
	padding: 12px 12px 12px 12px;
	margin: 24px 24px 0px 24px;
	border: 1px solid blue;
	background-color: #c6b5de;
	width: 500px;
}
.statistic_h{
	
}
.statistic_table{
	margin-left: auto;
	 margin-right: auto;
}

hier die div-struktur des bodys

<div class="content">
	<div class="top_block bar">
		<div class="content">
		</div>
	</div>
	<div class="background left"></div>
	<div class="left_block left">
		<div class="content"></div>
	</div>
	<div class="background navigation"></div>
	<div class="left_block navigation">
		<div class="content">
			<div class="inner">
			</div>
		</div>
	</div>


	<div class="content">
		<div id="midcon_content"></div>
	</div>
</div>

hilft mir bitte jemand, den fehler zu finden?

 

[Daaron]

Was passiert, wenn du testweise alle Höhen deaktivierst? Im Opera kannst du das ja direkt in den Entwicklertools machen, würd ich sagen.
Ich möcht wetten, das hängt alles entweder mit deinen 100%-Höhen oder deinen overflow:auto's zusammen.

Oh, und kleiner Tip am Rande:
Schreib gleich HTML5, wenn dir die Zielgruppe (<=IE8) nicht wichtig ist oder du HTML5shim mit einbindest. Mit den neuen Elementen könntest du den Inhalt deutlich besser strukturieren als mit ner Div-Hölle voller Klassen.

 

[palace4d]

Strukturelles Problem: Content>Bar>Content. Content hat Overflow:auto und min-height: 100%. Bar hat eine höhe von 38px, die dazugerechnet wird. Erhöhst du den Wert sollte der Scrollbereich größer werden. Das Wrapper div sollte nicht nochmal in sich selber vorkommen. Gib den eine id oder eine andere Klasse.