[gelöst] Bartik Theme Content Höhe 100%
Eingetragen von h4nnes (13)am 10.12.2012 - 21:41 Uhr in
Guten Abend,
kann mir bitte jemand erklären, wie ich ein Modul innerhalb des Bartik Themes auf 100% height bekomme? Ich habe sämtliche Einstellung per CSS probiert, bekomme den Content leider nicht auf 100%. Eigentlich sollen auch nicht alle Module auf 100% gestellt werden, sondern nur ein einziges Modul.
Hoffe mir kann jemand helfen.
Vielen Dank im Voraus!
Beste Grüße,
Hannes
- Anmelden oder Registrieren um Kommentare zu schreiben
Was verstehst Du denn unter
am 10.12.2012 - 22:08 Uhr
Was verstehst Du denn unter 100% Höhe? Normalerweise ist die Breite vorgegeben, aber die Höhe? Eine Seite kann doch im Browser nach unten letztlich beliebig lang werden.
Beste Grüße
Werner
Hallo Werner, vielen Dank
am 10.12.2012 - 22:39 Uhr
Hallo Werner,
vielen Dank für deine Antwort.
Ich würde gerne auf einer Seite (Modul) eine Map einbinden und diese sollte dann eben nur 100% sein (nicht scrollbar), da die Map ja innerhalb des Div's dann verschoben werden soll.
Die restlichen Seiten sollen ganz normal gescrollt werden.
Gruß Hannes
Das geht nicht so, wie Du Dir
am 11.12.2012 - 10:21 Uhr
Das geht nicht so, wie Du Dir das vorstellst. Bei dem Modul Gmap stellst Du die Größe des Kartenausschnitts in Pixel ein. Zusätzlich läst sich noch bestimmen, welche Navigation der User für diese Karte hat. Du kannst aber nicht wissen, mit welchem Device der Benutzer die Seite ansehen wird und wie groß bei diesem Device das Browserfenster ist. Also lebst Du mit der von Dir vorgegebenen Größe der Karte. Ist das Device zu klein, kommt es dann eben zum Scrollen. Ich arbeite bei solchen Ausschnitten gerne mit 600x600 Pixeln. Das kommt bei den meisten noch einigermaßen gut rüber.
Beste Grüße
Werner
Hallo Werner,entschuldige
am 14.12.2012 - 10:35 Uhr
Hallo Werner,
entschuldige meine verspätete Antwort. Hmm aber es müsste doch möglich sein, dass ich anstatt den Pixeln einfach sage width = 100% und height ebenfalls 100%... Bei der Breite funktioniert das so auch, aber leider nicht bei der höhe... Damit ich es so hinbekomme: https://google-developers.appspot.com/maps/documentation/javascript/exam...
Beste Grüße,
Hannes
Im CSS ist meist an
am 14.12.2012 - 10:48 Uhr
Im CSS ist meist an irgendeiner Stelle eine Breite angegeben, meistens für ein Element innerhalb von Body. Damit ist eine Breite definiert und man kann davon 100% ermitteln. Für die Höhe der Seite gibt es das nicht, schließlich soll die sich ja flexibel an die Erfordernisse anpassen. Von etwas Unbestimmten lassen sich aber keine 100% ermitteln. Was willst Du daran nicht verstehen?
Beste Grüße
Werner
Wie Werner schon sagt - So
am 14.12.2012 - 10:57 Uhr
Wie Werner schon sagt - So etwas wie heigth:100% gibt es nicht. Es gibt aber Tweaks und Workarounds, mittels min-heigth und heigth:auto. Das ist aber sehr vom Browser abhängig, und eigentlich nicht zu empfehlen. Hier gibt es z.B. n Fiddle zum Thema: jsfiddle.net Insgesamt sollte man auf solche Sachen aber verzichten, da es eigentlich auch keinen Grund gibt die Höhe auf 100% anzupassen, der sich nicht vermeiden ließe. Es ist eher unsauber, und hat oftmals Einfluss auf andere Elemente der Seite. Als Abhilfe gibt es aber auch noch den Umweg über JavaScript, womit es möglich ist die Höhe entsprechend kalkulieren zu lassen. Ist aber auch eher eine unschöne Variante.
Hier noch ein interessanter Artikel zum Thema: A list apart - In Search of the Holy Grail
Du könntest Deine Map ja auch
am 14.12.2012 - 12:05 Uhr
Du könntest Deine Map ja auch in einer Colorbox darstellen, dann hast Du sie FullScreen und unscrollbar, oder?
Hallo, Colorbox ist leider
am 16.12.2012 - 22:09 Uhr
Hallo,
Colorbox ist leider nicht möglich...
Eigentlich sollte es ja so funktionieren:
#div{height:auto !important;
min-height: 100%;
height:100%;
}
Zumindetens funktioniert es, wenn ich diesen auf einer HTML-Seite anzeigen lasse. Leider jedoch nicht innerhalb meines Drupalcontents...
Gruß Hannes
Das kann aber nur
am 16.12.2012 - 23:27 Uhr
Das kann aber nur funktionieren, wenn eines der Elternelemente dieses #div's ein "echte" Höhe in Pixeln hat.
Beste Grüße
Werner
Hallo Wernen, besten dank für
am 17.12.2012 - 11:35 Uhr
Hallo Wernen,
besten dank für deine Antwort. Wenn ich mir aber das Google Beispiel von oben anschaue, dann sehe ich da auch keine feste Größe?
Der Div "map_canvas" hat hier ja auch nur eine Höhe von 100%. Im Prinzip soll genau das in meinem content ausgegeben werden.
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Beste Grüße,
Hannes
Dann lies doch in der
am 17.12.2012 - 11:52 Uhr
Dann lies doch in der Anleitung mal weiter:
"Beachten Sie, dass einige CSS, die im Quirks-Modus funktionieren, im Standards-Modus nicht zulässig sind. Im Speziellen müssen alle auf Prozentzahlen basierenden Größen von übergeordneten Blockelementen übernommen werden und wenn einer dieser Vorgänger keine Größe festlegt, wird angenommen, dass sie eine Größe von 0 x 0 Pixeln haben."
100% Höhe ist keine Größe! 100px, 200px, das sind Größen. Wenn du 100% ohne Relation (Bezug zu einem Element mit Größe) angibst, dann wird von einer Höhe von 0 ausgegangen, wie es oben auch steht. Der Browser kann nicht "erraten" was Höhe 100% ist. Das kann er im Übrigen auch nicht bei der Breite, da findet auch immer ein Bezug statt, auch wenn es sich dabei etwas anders verhält.
Hallo zusammen, entschuldigt
am 27.12.2012 - 16:14 Uhr
Hallo zusammen,
entschuldigt meine verspätete Antwort... hmm das ist mir ja schon klar, Problem ist nur, wie ich das am besten löse?
Es sollte im Prinzip so sein:
http://livelovely.com/search
Da ist der Div auf 100%
Wie setze ich das am besten um?
Vielen Dank.
Beste Grüße,
Hannes
Wenn du dir da mal den
am 27.12.2012 - 16:21 Uhr
Wenn du dir da mal den SourceCode ansiehst, dann siehst du, dass dort ein JavaScript läuft, was die Höhe "errechnet", um diese dann quasi dynamisch an das Element zu übergeben.
/*resize the listingContainer and the mapContainer heights */
var hackProjection = null;
//--END OVERLAY HACK--//
[...]
Solche Scripte gibt es wie Sand am Meer im Netz, und bestimmt auch explizit für GoogleMaps. Müsstest du mal suchen. Wie ich schon vorher sagte, über JavaScript ist das durchaus möglich, wobei auch das wieder neue Probleme mit sich bringen kann. Aber damit ginge es.
Genesis schrieb Wenn du dir
am 29.12.2012 - 11:11 Uhr
Wenn du dir da mal den SourceCode ansiehst, dann siehst du, dass dort ein JavaScript läuft, was die Höhe "errechnet", um diese dann quasi dynamisch an das Element zu übergeben.
/*resize the listingContainer and the mapContainer heights */
var hackProjection = null;
//--END OVERLAY HACK--//
[...]
Solche Scripte gibt es wie Sand am Meer im Netz, und bestimmt auch explizit für GoogleMaps. Müsstest du mal suchen. Wie ich schon vorher sagte, über JavaScript ist das durchaus möglich, wobei auch das wieder neue Probleme mit sich bringen kann. Aber damit ginge es.
Falls es noch jemand interessiert. Ivch errechne jetzt per JS die gesamthöhe und kann dann später meinen Header + Footer davon abziehen und erhalte meinen Content-Bereich:
document.getElementById("map_canvas").style.height = document.getElementsByTagName("html")[0].offsetHeight + "px";