zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div-Höhe anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.11.2014, 02:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.11.2014
Beiträge: 3
bluemle befindet sich auf einem aufstrebenden Ast
Standard Div-Höhe anpassen

Hey Leute,

ich habe das Problem, dass die zwei Div's "text" und "sidebar" im leeren Zustand bereits höher sind als die Seite. Ich hätte gerne, dass beide gleichzeitig und gleichmäßig wachsen, wenn man in eine der beiden einen Text einfügt, der länger als die Seite ist. Sie sollen sich dann aneinander in der Höhe anpassen. Solange der Inhalt der beiden Div's auf der Seite Platz hat, sollen beide die restliche Seite ausfüllen.

Könnt ihr mir bei meinem Problem helfen?

Grüße
bluemle

Hier der HTML-Code und der Link zu jsfiddle:

HTML-Code:
<html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            html {
                height: 100%;
            }
            body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            #topbar {
                width: 100%;
                height: 72px;
                float: left;
                background-color: #333333;
            }
            #topbar_logo {
                padding: 10px;
                float: left;
                background-color: black;
            }
            #topbar_menu {
                padding: 10px;
                color: #fdfdfd;
            }
            #sidebar {
                float: left;
                width: 170px;
                height:100%;
                background-color: #666600;
            }
            #text {
                background-color: #ffcc33;
                height: 100%;
            }
            #content {
                height: 100%;
                width: 100%;
                clear:both;
            }
        </style>
    </head>
    
    <body>
        <div id="topbar">
            <div id="topbar_logo">
                <img style="width: 150px; height: 52px;" alt="" src="logo.png">
            </div>
            <div id="topbar_menu">
                <br>
            </div>
        </div>
        <br>
        <div id="content">
            <div id="sidebar">
                <br>
            </div>
            <div id="text">
                <br>
            </div>
        </div>
    </body>

</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.11.2014, 08:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Habe ich das korrekt verstanden, du willst zwei gleich hohe Spalten haben?
Das Problem haben schon viele vor dir gehabt und es gibt einige Lösungsansätze dafür.
Falls du IE in alten Versionen nicht unterstützen willst dann nimm die flexbox-Variante.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.11.2014, 02:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.11.2014
Beiträge: 3
bluemle befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Antwort.

Ich habe mich jetzt für diese Methode entschieden (ähnlich zur Gallagher Methode).

Mein Problem ist jetzt noch folgendes. Das "topbar"-div soll eine feste Höhe von 72px haben. Die "sidebar" und "text" divs sollen eine Mindesthöhe besitzen. Und zwar so hoch, dass die restliche Seite ausgefüllt wird. Beide sollen erst wachsen, wenn deren Inhalt die Seite überfüllt.
Mit height:100% klappt das leider nicht und man sieht Scrollbalken.

Weiß hierzu jemand eine Lösung?
Mit Zitat antworten
  #4 (permalink)  
Alt 29.11.2014, 08:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

ich würde nicht auf veraltete, komplizierte Lösungen zurückgreifen, sondern zu dem Flexbox-Modell greifen. Damit braucht man auch keine unnötigen Container, nur header (oder nav), main, article und aside. Das könnte zum Beispiel so aussehen:

HTML5: bluemle - Gleichhohe Spalten

Das entscheidende CSS:

Code:
      body {
         height: 100%;
         min-height: 100vh;
         display: flex;
         flex-direction: column;
      }
      header {
         width: 100%;
         padding: 1%;
         height: 72px;
      }
      main {
         padding: 0;
         margin: 0;
         flex: 1;
         display: flex;
      }
bzw. das gleiche noch mal mit sinnvollen Prefixen für ältere Browser-Versionen:

Code:
      body {
         height: 100%;
         min-height: 100vh;
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
      }
      header {
         width: 100%;
         padding: 1%;
         height: 72px;
      }
      main {
         padding: 0;
         margin: 0;
         -webkit-box-flex: 1;
         -webkit-flex: 1;
         flex: 1;
         -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
      }
Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 30.11.2014, 12:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.11.2014
Beiträge: 3
bluemle befindet sich auf einem aufstrebenden Ast
Standard

Super, danke. Habe es damit hinbekommen

Grüße
bluemle
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DIV Höhe dynamisch anpassen vaults CSS 20 26.01.2012 02:05
Div Höhe an Inhalt anpassen prosol CSS 4 28.03.2011 13:28
Div in der Höhe anpassen cb01 CSS 2 15.03.2007 04:41
div höhe anpassen Dgx CSS 3 02.03.2007 19:02
höhe eines div tag an ein anderes anpassen ffr CSS 4 09.12.2003 17:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:45 Uhr.