[GELÖST] CSS - Div 100% - Inhalt scrollbar

brandy · 19. Dezember 2011 10:53

Hallo!

Ich hab mir hier ein Design gebastelt - www.davidb.at/index.php
Habs so gerichtet, dass der Container immer 100% des Fensters hat.
Jetzt möchte ich aber, dass wenn der Inhalt länger wird als der Container groß ist, dass dieses Div scrollbar wird und nicht mitwächst.
Hat da vielleicht jemand eine Idee?
Ich kann bei diesem Div ja keine fixe größe eingeben, da der Container ja immer mit der Bildschirmgröße mitwächst und 100% erwirkt eben das was ich momentan habe.

Vielen Dank!

Beitrag geändert von brandy (01. Februar 2012 12:00)

mike-r · 19. Dezember 2011 15:15

Du setzt auf den entsprechenden Container einfach overflow:auto, dann kannst Du auch eine fixe Höhe vergeben.
Siehe http://www.css4you.de/example/overflow.html

brandy · 20. Dezember 2011 15:22

Wenn ich es so mache, dann habe ich ja ständig die Option zu Scrollen - sollte jedoch bei einer Unterseite weniger Inhalt sein, möchte ich, dass kein Scrollbalken angezeigt wird und trotzdem das gesamte Design bis zum unteren Fensterrand geht. Ist ein wenig kompliziert, aber ich hoffe ihr versteht...

mike-r · 20. Dezember 2011 17:29

auto=automatisch. Der Scrollbalken erscheint nur, wenn er benötigt wird.
Hast Du es denn schon einmal ausprobiert?

brandy · 20. Dezember 2011 21:32

Naja die Größe orientiert sich jetzt ja am Inhalt. Der Container wächst natürlich auch mit, da er ja auf 100% gestellt ist. Er soll zwar immer 100% vom Fenster haben, jedoch soll sich das untere, rechte div danach scrollen lassen - ich habs auch schon probiert, jedoch hat das untere div ja keine Begrenzung, an der sich der Scrollbalken orientieren könnte!

Beitrag geändert von brandy (20. Dezember 2011 21:42)

mike-r · 21. Dezember 2011 23:23

Ich kann dir leider überhaupt nicht folgen, verweise somit auf meine 1. Antwort.

Beitrag geändert von mike-r (21. Dezember 2011 23:23)

Klenkes · 21. Dezember 2011 01:06

brandy schrieb:

Naja die Größe orientiert sich jetzt ja am Inhalt. Der Container wächst natürlich auch mit, da er ja auf 100% gestellt ist. Er soll zwar immer 100% vom Fenster haben, jedoch soll sich das untere, rechte div danach scrollen lassen - ich habs auch schon probiert, jedoch hat das untere div ja keine Begrenzung, an der sich der Scrollbalken orientieren könnte!

Ich glaube ich ahne ein wenig...
Da könnte jQuery helfen, doch wenn du jetzt eine fertige Lösung erwartest, muss ich dich enttäuschen, da ich mich mit solchen Sachen auch etwas quälen muss.
Du müsstest die Höhe des zu scrollenden #right_bottom feststellen und mit der Fensterhöhe vergleichen, um dann die Höhe des #right_bottom im CSS zu setzen.

In der Art von:

Hier klicken, um den Code zum Kopieren zu markieren

$(function() {
 if ($('#right_bottom').height() > $(window).height()) {
 $('#right_bottom').css({height: 'berechnete Höhe', overflow-y: 'scroll'});
 }
});

Wobei das natürlich viel komplizierter wäre, da du von $(window).height() noch deinen Logoteil von oben abziehen müsstest, und berücksichtigen müsstest, dass jemand das Fenster resized.
Leider schüttel ich sowas nicht aus dem Ärmel, aber ein jQuery Guru sicherlich schon.

brandy · 28. Dezember 2011 10:00

Hallo!

Hab jetzt ein paar Lösungsansätze gesehen, die mir gefallen würden, jedoch hab ich irgendwie ein Brett vorm Kopf was den Einbau angeht...
Hab jetzt zB diesen Code hier eingebaut:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript">
var div = document.getElementById('container');
var height = div.innerHeight;
</script>

Zu sehen gibts das ganze hier - www.davidb.at/_cms
Funktionieren tuts aber noch nicht :-)

Ich möchte einfach, dass der Container die Fensterhöhe hat und ich das DIV im Container dann mit 100% belegen kann!

Vielen Dank!

mike-r · 28. Dezember 2011 10:20

Not found...

Ich frage mich, warum Du nicht einfach einen 100% hohen Container nimmst und diesem die overflow-eigenschaft via CSS mitgibst.

mike-r · 28. Dezember 2011 10:31

http://jsfiddle.net/qfAeq/

brandy · 28. Dezember 2011 10:44

@mike-r: Link war www.davidb.at/index.php - sorry...
Overflow wär eine Lösung - aber da alles 100% hat hilft das nichts, weil er ja nirgends eine Begrenzung hat - dann bräuchte ich zumindest eine Bodyhöhe in der Höhe des innerheights...

Klenkes · 28. Dezember 2011 10:59

Das Grundproblem ist doch, dass deine beiden Bereiche links-oben und rechts-oben eine fixe Höhe haben(150px), somit kann alles darunter nicht in % angegeben werden.

Entweder duch hast oben 20% und unten 80% = 100% = Body/Fensterhöhe
oder
du machst oben fixe 150px und must darunter die Höhe dynamisch berechnen, und dies geht nunmal nur mit Javascript.

Dazu bietet Jquery doch bereits vordefinierte Methoden.

mike-r · 28. Dezember 2011 11:00

Brandy: meinen Link hast Du gesehen?

piratos · 28. Dezember 2011 13:40

http://www.gn-webdesign.de/css-tutorial … t-100.html

mike-r · 28. Dezember 2011 14:34

piratos schrieb:

gn-webdesign.de/css-tutorials/css-div-height-100.html

Die dort angegebene "Lösung" funktioniert weder im Quirksmode (ebd.) noch im Standards-mode wie vorgesehen. Lediglich bei wenig Text zieht sie das Div bis zum bottom.
Im IE schneidet diese "Lösung" den Scrollbalken ab, wenn der Text länger ist, als der Viewport. Ziemlich grosses Kino, wer denkt sich sowas aus?

Im Grunde "zeichnet" diese Lösung (mit umständlichem und überflüssigen Code) einzig einen weissen Hintergrund auf 100% Höhe. das könnte man mit einem Einzeiler-css besser lösen und ist zusätzlich überhaupt nicht das was brandy hier nachfragt.

brandy · 28. Dezember 2011 14:42

So meine Lieben - habs jetzt zusammen mit einem Kollegen gelöst:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript">
function groeße() {
var hoehe = window.innerHeight;
var div = document.getElementById("container");
div.style.height = hoehe + "px";
}
function groeße_2() {
var hoehe = window.innerHeight-150;
var div = document.getElementById("right_bottom");
div.style.height = hoehe + "px";
}
function funktion()
     {
     groeße();
     groeße_2();
     }
</script>

Vielen Dank euch allen!

Klenkes · 28. Dezember 2011 15:34

Ist letztendlich das, was ich gemeint hatte.
Jetzt brauchst du noch eine Resizefunktion, wenn jemand das Fenster verändert.

mike-r · 28. Dezember 2011 17:08

brandy schrieb:

So meine Lieben - habs jetzt zusammen mit einem Kollegen gelöst:
Hier klicken, um den Code zum Kopieren zu markieren
<script type="text/javascript">
[...]

Und für die Leute ohne JS bauste noch eine Fallbacklösung anhand meines Beispiels. Wenn du das dann hast, kannste das JS wieder rausschmeissen glasses
Sind alle zufrieden...

Beitrag geändert von mike-r (28. Dezember 2011 17:08)

brandy · 29. Dezember 2011 10:13

@Klenkes: Wie frag ich ab, ob jemand das Fenster verändert - müsste theoretisch mit meiner Funktion funktionieren, die in einer Schleife ständig abgefragt wird, oder?

Klenkes · 29. Dezember 2011 10:26

brandy schrieb:

@Klenkes: Wie frag ich ab, ob jemand das Fenster verändert - müsste theoretisch mit meiner Funktion funktionieren, die in einer Schleife ständig abgefragt wird, oder?

Das müsste so aussehen:

Hier klicken, um den Code zum Kopieren zu markieren

$(document).ready(function(){

  $(window).resize(function(){
    // hier wieder deine Funktionen

  });
});

brandy · 29. Dezember 2011 10:38

Welchen Teil bau ich hier aber ein - nochmal die komplette, oder nur den Teil, wo er beide Funktionen aufruft. Hab nämlich jetzt beides ausprobiert, hat aber keines funktioniert!

Klenkes · 29. Dezember 2011 10:55

Zum Einen würde ich dies am vor dem schliessenden </body> einbauen:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript">
$(document).ready(function(){

  $(window).resize(function(){
function funktion()
     {
     groeße();
     groeße_2();
     }
  });
});
</script>

Und natürlich must du jQuery auch laden. Z.B. so:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Ob das Aufrufen deiner Funktionen innerhalb der Resizefunktion funktioniert... mhh... da zeigt sich wieder, dass mein Halbwissen oft nur ein Viertelwissen ist.
Da weiss ein Anderer vieleicht mehr.

brandy · 29. Dezember 2011 14:04

So jetzt ist mir nochwas aufgefallen - im Internetexplorere funktionieren die ganzen Scripts absolut nicht, obwohl ich Javascript aktiviert habe! Ist eh wieder klar, dass IE Makken macht - Opera, Safari, FF funktioniert alles bestens...
Was muss ich da einstellen?

Beitrag geändert von brandy (29. Dezember 2011 14:06)

mike-r · 29. Dezember 2011 15:19

Internetoptionen -> Erweitert [✓] Skriptfehler anzeigen

FF gibt in der Konsole übrigens auch eine Fehlermeldung aus.

brandy · 29. Dezember 2011 15:36

Ok das wäre dann Zeile 17 - diese beinhaltet - div.style.height = hoehe + "px";
Was passt daran nicht?

Forum für CMS/made simple

#1 19. Dezember 2011 10:53

[GELÖST] CSS - Div 100% - Inhalt scrollbar

#2 19. Dezember 2011 15:15

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#3 20. Dezember 2011 15:22

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#4 20. Dezember 2011 17:29

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#5 20. Dezember 2011 21:32

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#6 21. Dezember 2011 23:23

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#7 21. Dezember 2011 01:06

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#8 28. Dezember 2011 10:00

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#9 28. Dezember 2011 10:20

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#10 28. Dezember 2011 10:31

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#11 28. Dezember 2011 10:44

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#12 28. Dezember 2011 10:59

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#13 28. Dezember 2011 11:00

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#14 28. Dezember 2011 13:40

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#15 28. Dezember 2011 14:34

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#16 28. Dezember 2011 14:42

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#17 28. Dezember 2011 15:34

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#18 28. Dezember 2011 17:08

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#19 29. Dezember 2011 10:13

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#20 29. Dezember 2011 10:26

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#21 29. Dezember 2011 10:38

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#22 29. Dezember 2011 10:55

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#23 29. Dezember 2011 14:04

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#24 29. Dezember 2011 15:19

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

#25 29. Dezember 2011 15:36

Re: [GELÖST] CSS - Div 100% - Inhalt scrollbar

Fußzeile des Forums