Ergebnis 1 bis 6 von 6

Thema: Inhalt ber Browserfensterhhe hinaus auf die gleiche Hhe bringen

  1. #1
    Gromeister(in) Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beitrge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Inhalt ber Browserfensterhhe hinaus auf die gleiche Hhe bringen

    Hallo,

    ich habe nun schon zahlreiche Versuche hinter mir, aber irgendwie will mein Vorhaben nicht klappen.

    Ich habe links eine Sidebar und rechts den Contentbereich mit einer Variablen Hhe. Ich mchte die Navigationsleiste immer genau so lang haben, wie der Contentbereich aktuell ist.

    Ich habe dies bereits mit jQuery(..).height() und min-height:100% probiert, allerdings kriege ich die Sidebar dann immer nur so hoch, wie die Ansicht im aktuellen Browserfenster reicht. Ist der Contentbereich lnger, sodass man scrollen muss, endet die Navigationsleiste direkt an der Stelle, was standardmig im Sichtbereich war.

    Wei jemand von euch wie ich das auf eine Hhe bringe?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist lter als 90 Tage. Die darin enthaltenen Informationen sind mglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    -

  2. #2
    Bandit
    Gast

    Standard AW: Inhalt ber Browserfensterhhe hinaus auf die gleiche Hhe bringen


  3. #3
    Gromeister(in)
    Themenstarter
    Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beitrge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Inhalt ber Browserfensterhhe hinaus auf die gleiche Hhe bringen

    Edit: Achso es gibt keine andere Lsung auer den Hintergrund ber ein Backgroundimage zu simulieren? Dann htte ich aber noch das Problem, dass die Inhalte nachdem die Navigation zuende ist wieder direkt unter ihr angezeigt werden und nicht mehr im gleichen Abstand nebeneinander, wie es passiert solang die Navigation lang genug ist.

    Die Seite hatte ich schon offen - es geht aber leider trotzdem nicht :/

    HTML-Code:
            <div id="wrapper">
                <div id="nav-left">
                    nav left
                </div>
                <div id="nav-top">
                    top nav
                </div>
                <div id="content" class="clearfix">
                    <h1>hallo</h1>
                    <h1>hallo</h1>
                    
                </div>
                <div style="clear: both;"></div>
            </div>
    HTML-Code:
    @media only screen and (min-width: 980px)
    {
        /* Style adjustments for viewports that meet the condition */
        #nav-left
        {
            width:223px;
            float:left;
            min-height:100%;
            /* IE 6 Fix */
            height:auto !important;
            height:100%;
    
        }
    
        #nav-top
        {
            min-width:100%;
            /* IE 6 Fix */
            width:auto !important;
            width:100%;
            height:45px;
        }
    
        #content
        {
            min-width:100%;
            /* IE 6 Fix */
            width:auto !important;
            width:100%;
        }
    }
    .clearfix:after
    {
        clear: both;
    }
    Gendert von Darkxor (06.05.2013 um 21:14 Uhr)
    -

  4. #4
    Gromeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beitrge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Eintrge
    1

    Standard AW: Inhalt ber Browserfensterhhe hinaus auf die gleiche Hhe bringen

    Schau dir mal flexbox an: http://css-tricks.com/using-flexbox/

    Das wird halt vom IE mal wieder erst ab Version 10 supported, ansonsten ist es schon recht gut abgedeckt.
    Wenn das keine Option ist wirst du tricksen mssen.

    Auf welches Element hast du denn jQuery.height() verwendet? Auf den Content-Bereich sollte das eigentlich schon passen.
    Gendert von SinnlosS (07.05.2013 um 11:11 Uhr)
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  5. #5
    Gromeister(in)
    Themenstarter
    Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beitrge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Inhalt ber Browserfensterhhe hinaus auf die gleiche Hhe bringen

    Edit:

    Hab den Fehler gefunden. Scheinbar interpretiert der Browser height:100% immer als Hhe der Browseransicht und nicht Hhe des Inahlts. Da ich dies auf html, body und wrapper angewandt hatte, funktionierte scheinbar die jquery Methode nicht. Hab es nun darber gelst, aber irgendwie schade, dass man es aktuell nur halbwegs vernnftig via JS lsen kann. Auch in anderen Templates sah ich immer, dass man hier die Gre via JS setzt.

    Zitat Zitat von SinnlosS Beitrag anzeigen
    Schau dir mal flexbox an: http://css-tricks.com/using-flexbox/

    Das wird halt vom IE mal wieder erst ab Version 10 supported, ansonsten ist es schon recht gut abgedeckt.
    Wenn das keine Option ist wirst du tricksen mssen.

    Auf welches Element hast du denn jQuery.height() verwendet? Auf den Content-Bereich sollte das eigentlich schon passen.

    Sowohl auf content als auch wrapper aber beides klappte leider nicht.

    HTML-Code:
    $(document).ready(function()
    {
        function auto_height()
        {
            alert($('#content').height());
            $('#nav-left').height($('#content').height());
            $('#content').resize(function()
            {
                auto_height();
            });
        }
        auto_height();
    });


    Im Firebug > Layout hat #content eine Hhe von 1638 px (sodass es ja eigentlich gehen sollte - wird auch im eingebauten Debugalert angezeigt) - der wrapper aber komischerweise, obwohl content darin liegt immer nur die Hhe das aktuellen Sichtfelds.
    Gendert von Darkxor (08.05.2013 um 20:43 Uhr)
    -

  6. #6
    Gromeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beitrge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Eintrge
    1

    Standard AW: Inhalt ber Browserfensterhhe hinaus auf die gleiche Hhe bringen

    Ich habe gerade selber mal getestet, das hier funktioniert prima:

    Code:
    $(function(){
      nav_left_height();
      $("#content").resize(nav_left_height());
    });
    function nav_left_height() {
      $("#nav-left").height($("#content").height());
    }
    Edit: Ich wrde dir aber zu Flexbox raten und den JQuery-Code nur als Browser-Weiche fr IE <10 verwenden.
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

hnliche Themen

  1. DIV gleiche Hhe in jeder Zelle
    Von freezly im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 10.01.2013, 22:30
  2. DIV schiesst ber Box hinaus, warum?
    Von stamfix im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 19.09.2010, 16:35
  3. Text ragt ber div hinaus
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 21.09.2009, 14:14
  4. div boxen auf gleiche hhe
    Von minder im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 15.06.2008, 22:55
  5. Bild schiet ber Div hinaus
    Von Guest im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 05.07.2007, 18:10

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhnge hochladen: Nein
  • Beitrge bearbeiten: Nein
  •