Antworten auf deine Fragen:
Neues Thema erstellen
Status
Für weitere Antworten geschlossen.

Antworten zum Thema „div height 100%“

E

eimsbush-styles2

Guest

Moin,
ich wollte meinen div bereich über die komplette seite einrichten und hab dafür folgenden css-code verwendet:
Code:
html {
	height:100%;
	margin:0;
	padding: 0% *;
	}
	
body {
	text-align: center; 
	margin: 0;
	height: 100%;
	padding: 0% *;
}

#container {
	width: 780px;
	height: 100%;
	text-align:center;
	margin: 0px auto;
	padding: 5px;
	}
wobei #container der div-block ist.
Soweit ganz gut. Leider zeigt er dadurch die ganze zeit scrollbalken an, da die seite nun minimal größer ist als das was im browser angezeigt wird.
Könnte mir da jemand helfen, wie ich das scrollen weg bekomm...
Vielen dank (und sorry, da das hier bestimmt schonmal gefragt wurde, konnte es aber leider mit der foren suche nicht finden)
 

hellemon

Hat es drauf

Hallo @eimsbush-styles2,

ich habe gerade bei selfhtml folgendes gelesen vielleicht hilft es dir ohne es selbst ausbrobiert zu haben.

http://aktuell.de.selfhtml.org/artikel/html/scrollbalken/

Zitiert:

Eine der zur Zeit elegantesten Methoden ist die Kombination der oben gezeigten overflow-x-Eigenschaft mit den so genannten Conditional Comments. Diese sind eine proprietäre Methode von Microsoft zur Browsererkennung, die jedoch den Vorteil hat, dass sie innerhalb von HTML-Kommentarzeichen stehen und somit von anderen Browsern und dem Validator ignoriert werden. Das Dokument bleibt valide:

Code:
<style type="text/css">
html,body {margin:0; padding:0;}
html {background-color:blue;}
body {border:1px solid blue; margin:10px;}
</style>

<!--[if gte IE 6]>
<style type="text/css">
html {overflow-x:hidden;}
body {margin-right:28px;}
</style>
<![endif]-->

Die hier im zweiten Teil notierten CSS-Eigenschaften verhindern hier ? und zwar ausschließlich für den Internet Explorer 6+ ? die Anzeige des Scrollbalkens. Im gezeigten Beispiel wird neben overflow-x noch der rechte Rand margin-right um die ungefähre Breite des Scrollbalkens vergrößert (diese kann unter verschiedenen Windows-Betriebssystemen (XP, Windows 2000) durchaus schwanken). Aber Vorsicht, es handelt sich hier um einen so genannten "Hack", der möglicherweise nicht zukunftssicher ist, weil heute noch niemand weiß, wie sich zukünftige Versionen des Internet Explorers verhalten werden. Weitere Informationen zu Conditional Comments gibt es auf der Website von Microsoft: englischsprachige Seite About Conditional Comments.

Vorsicht ist ebenfalls geboten, wenn man sich die Option überbreiter Inhalte bei einzelnen Seiten offen halten will. Die Lösungen mit overflow-x schalten den horizontalen Scrollbalken in jedem Fall ab und machen so überbreite Seiteninhalte für den Benutzer möglicherweise nicht erreichbar.
 
E

eimsbush-styles2

Guest

Danke für die antwort, doch glaube ich kaum das mir sie viel weiter hilft, da mein problem auch in firefox existiert und ich somit mit einer IE6 browserweiche nicht wirklich weiterkomme....
 

hellemon

Hat es drauf

Dann habe ich noch etwas das sich zwar ungewöhnlich anhört aber geholfen hat. Und zwar hatte ich letzten ebenfalls ein Problem mit einem der Scrollbalken in Firefox 1.5 bzw. 2.0.

Hier wurde eine Tabelle generiert die ursprünglich locker in Ihren Bereich passen sollte doch wurde mir immer unten der Scrollbalken angezeigt.

Hier habe ich folgenden Befehl in das <table> Tag aufgenommen und seit dem ist der Scrollbalken unten nicht mehr da und der an der rechten Seite kommt wenn er gebraucht wird.

Code:
style="list-style-position: outside;"

viel Grüße

hellemon
 

Quaese

Noch nicht viel geschrieben

Hi,

wenn es nur darum geht, das Element container auf 100% zu strecken, ohne dass Scrollbars entstehen, solltest Du die Innenabstände (padding) entfernen, da diese in die Höhenberechnung mit einfliessen. Stattdessen erstellst Du ein weiteres Element, über welches Du die Innenabstände zuweist.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html {
   height:100%;
   margin:0;
   padding: 0% *;
   }

body {
   text-align: center;
   margin: 0;
   height: 100%;
   padding: 0;
}

#container { width: 780px;
             height: 100%;
             text-align:center;
             margin: 0px auto;}

.paddingDiv{ padding: 5px;}
-->
</style>

</head>
<body>
<div id="container">
  <div class="paddingDiv">Inhalt mit Padding</div>
</div>
</body>
</html>
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
E

eimsbush-styles2

Guest

Alles klar, hat sich erledigt, mit overflow hidden funktionierts thanks. Thread kann geschlossen werden (falls sowas denn hier gemacht wird, kA, bin neu hier^^)

Closed by LadySaturn
 
Zuletzt bearbeitet von einem Moderator:
Status
Für weitere Antworten geschlossen.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.874
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben