zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 100% Mindesthöhe erreichen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.02.2015, 18:54
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard 100% Mindesthöhe erreichen

Hallo zusammen,

ich hoffe ihr könnt mir helfen, so das der Viewport die gesamte Höhe einnimmt. Der Footer (sticky-footer) klebt schon unten:
Folgender HTML-Code:
Code:
<body id="top" class="win firefox gecko fx35">
<div id="wrapper">
<div id="container">
<div id="main">
<div class="inside">
</div>
<aside id="left">
<div class="inside">
</aside>
</div>
<footer id="footer">
<div class="inside">
</footer>
</div>
<script>
</body>
</html>
Der CSS-Code dazu sieht folgendermaßen aus:
Code:
body,
html {
    height:100%;
    margin:0;
    padding:0;
}

#wrapper:after,
#container:after,
#footer:after,
#footer .inside:after {
    clear:both;
    display:block;
    content: "";
}

#container {
    min-height:100%;
    position:relative;
    padding-bottom:3em;
}
#main {
    width:70%;
    min-height:100%;
    left:30%;
    background-color:#0091ff;
}

#left {
    width:30%;
    min-height:100%;
    left:-70%;
    background-color:#f00a0a;
}

#footer {
    width:100%;
    height:3em;
    bottom:0;
    position:absolute;
}
Kann mir jemand einen Tipp geben, damit die zwei Spalten (left und main) den kompletten Viewport ausfüllen?

Geändert von seeadler (23.02.2015 um 19:10 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.02.2015, 19:51
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,

dein HTML-Quellcode ist leider Schrott.

Da werden Container geöffnet aber nicht wieder geschlossen. Andere sind falsch ineinander verschachtelt.

Du solltest erst mal den Quellcode überarbeiten und mit Inhalt füllen, damit wir als Außenstehende überhaupt etwas damit anfangen können.

Und was soll passieren, wenn der Inhalt zu groß für das Fenster wird?

Am besten wäre es, wenn du die Seite online bereitstellen könntest, zum Beispiel bei einem Freeware-Provider wie bplaced.net. Für uns Hilfwillige ist es nervig aus Quellcodeschnipseln Seiten zusammenzubasteln, die dann nicht mal funktionieren. Zudem müsste die Seite nur einmal erstellt werden und nicht von jedem einzeln, der dir helfen möchte.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.02.2015, 19:53
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

sorry. hier nochmal der ganze code
PHP-Code:
<!DOCTYPE html>
<
html lang="de">
<
head>

      <
meta charset="utf-8">
    <
title>Home S.T.A.R.TRAINING</title>
    <
base href="http://localhost/stars-training/">

          <
meta name="robots" content="index,follow">
      <
meta name="description" content="">
      <
meta name="keywords" content="">
      <
meta name="generator" content="">
    
            <
link rel="stylesheet" href="assets/css/294040f39f4a.css">
        
          <!--[if 
lt IE 9]><script src="assets/html5shiv/3.7.0/html5shiv-printshiv.js"></script><![endif]-->
      
</head>
<body id="top" class="win firefox gecko fx35">

      
    <div id="wrapper">

                    
      
              <div id="container">

                      <div id="main">
              <div class="inside">
                
<div class="mod_article first last block" id="home">

  
  
<h1 class="ce_headline first last">
  Herzlich Willkommen</h1>

  
</div>
              </div>
                          </div>
          
                                    <aside id="left">
                <div class="inside">
                  
<!-- indexer::stop -->
<nav class="mod_navigation block">

  
  <a href="index.php/home.html#skipNavigation1" class="invisible">Navigation überspringen</a>

  
<ul class="level_1" role="menubar">
            <li class="active first"><span class="active first" role="menuitem">Home</span></li>
                <li class="sibling"><a href="index.php/strength_and_conditioning.html" title="strength_and_conditioning" class="sibling" role="menuitem">Strength_and_Conditioning</a></li>
                <li class="sibling"><a href="index.php/therapeutic_and_preventive.html" title="therapeutic_and_preventive" class="sibling" role="menuitem">Therapeutic_and_Preventive</a></li>
                <li class="sibling"><a href="index.php/athletic.html" title="athletic" class="sibling" role="menuitem">Athletic</a></li>
                <li class="sibling"><a href="index.php/resistance.html" title="resistance" class="sibling" role="menuitem">Resistance</a></li>
                <li class="sibling"><a href="index.php/self_confidence.html" title="self_confidence" class="sibling" role="menuitem">Self confidence</a></li>
                <li class="sibling"><a href="index.php/referenzen.html" title="Referenzen" class="sibling" role="menuitem">Referenzen</a></li>
                <li class="sibling"><a href="index.php/impressum.html" title="Impressum" class="sibling" role="menuitem">Impressum</a></li>
                <li class="sibling last"><a href="index.php/datenschutz.html" title="Datenschutz" class="sibling last" role="menuitem">Datenschutz</a></li>
      </ul>

  <a id="skipNavigation1" class="invisible">&nbsp;</a>

</nav>
<!-- indexer::continue -->
                </div>
              </aside>
                      
                                
        </div>
      
      
                        <footer id="footer">
            <div class="inside">
              
<p>Und hier ist der Inhaltsbereich des footers</p>            </div>
          </footer>
              
    </div>

      
  
<script>setTimeout(function(){var e=function(e,t){try{var n=new XMLHttpRequest}catch(r){return}n.open("GET",e,!0),n.onreadystatechange=function(){this.readyState==4&&this.status==200&&typeof t=="function"&&t(this.responseText)},n.send()},t="system/cron/cron.";e(t+"txt",function(n){parseInt(n||0)<Math.round(+(new Date)/1e3)-86400&&e(t+"php")})},5e3);</script>

</body>
</html> 
Mit Zitat antworten
  #4 (permalink)  
Alt 23.02.2015, 20:55
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,

mit deinem Quelltext ist leider einiges im argen. Da ist es einfacher die Seite komplett neu zu erstellen.

Ich habe mal ein Beispiel mit aktuellem HTML5, CSS3 und Flexbox erstellt:

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>

   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->

   <title>HTML5 - 100% Mindesthöhe mit Sticky Footer</title>

   <meta name="description" content="HTML5 - 100% Mindesthöhe mit Sticky Footer">

   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
   <![endif]-->

   <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>

   /* Hack für IE 8 */
   @media \0screen {
   }
   /* Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @media all {
   /* Meine Standardvorgaben */
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-family: Verdana, sans-serif;
         font-size: 120%;   /* Die Einheit rem greift auf die Angabe in html zurück, nicht auf body */
         line-height: 1.3;   /* line-height wird ohne Einheit angegeben */
      }
      body {
         width: 100%;
         color: black;
         background-color: white;
         padding: 0;
         margin: 0 auto;
      }
      h1 {
         font-size: 30px;
         font-size: 1.6rem;
         margin: 9px 0;
         margin: 1rem 0;
      }
      p {
         font-size: 20px;
         font-size: 1.1rem;
         margin: 9px 0;
         margin: 1rem 0;
      }
      ol,
      ul {
         padding-left: 0;
      }
      li {
         font-size: 20px;
         font-size: 1.1rem;
         list-style-type: none;
      }
   }
   /* Ende meiner Standardvorgaben */
   /* Ab hier folgen die seitenspezifischen Angaben */
   @media all {
      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;
      }
      main {
         -webkit-box-flex: 1;
         -webkit-flex: 1;
         flex: 1;
         -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
      }
      footer {
         padding: 2%;
         background-color: #456188;
         color: white;
      }
      main {
         display: flex;
      }
      main nav {
         background-color: seashell;
         padding: 0.5rem;
         width: 30%;
      }
      main article {
         background-color: gainsboro;
         padding: 0.5rem;
         width: 70%;
      }
   }
   </style>

</head>

<body>
   <main role="main">
      <nav>
         <h1>Navigation</h1>
         <ul>
         	<li>Banane</li>
         	<li>Mandarine</li>
         	<li>Apfel</li>
         	<li>Birne</li>
         	<li>Himbeere</li>
         	<li>Kirsche</li>
         </ul>
      </nav>
      <article>
         <h1>article</h1>
         <p>Lorem ipsum dolor sit amet consectetuer tincidunt hendrerit neque Aenean ac. Lacus pede nonummy a wisi facilisis enim lorem parturient wisi nascetur. Auctor et ultrices ligula sed interdum.</p>
         <p>Lorem ipsum dolor sit amet consectetuer tincidunt hendrerit neque Aenean ac. Lacus pede nonummy a wisi facilisis enim lorem parturient wisi nascetur. Auctor et ultrices ligula sed interdum.</p>
      </article>
   </main>
   <footer role="contentinfo">
      <h1>Footer</h1>
      <p>Und noch etwas Footertext.</p>
   </footer>
</body>
</html>
Wenn du veraltete Lösungen bevorzugst solltest du erstens nach "float", zweitens nach "Faux Columns" und drittens nach "Sticky Footer" googeln.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 23.02.2015, 23:00
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Flexbox
von der Methode habe ich auch schon gehört. Vielen Dank für die Lösung.

Mit der flex-Methode spart man sich die Hintergrundgraphik und es wird die Zukunft sein, oder?
Mit Zitat antworten
  #6 (permalink)  
Alt 24.02.2015, 08:50
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

Zitat:
Mit der flex-Methode spart man sich die Hintergrundgraphik
Wenn du die Hintergrundgrafik der Faux-Column-Lösung meinst - ja. Wobei es Faux Column in verschiedenen Ausführungen gibt, teilweise auch ohne Hintergrundgrafik. Faux Column ist ein Oberbegriff für ähnliche Lösungen, bei denen die gleiche Spaltenhöhe nur vorgetäuscht wird.

Zitat:
es wird die Zukunft sein, oder?
Flexbox ist bereits die Gegenwart und natürlich auch für die Zukunft entwickelt worden.

Gruss

MrMurphy
Mit Zitat antworten
  #7 (permalink)  
Alt 24.02.2015, 16:18
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Flexbox ist bereits die Gegenwart und natürlich auch für die Zukunft entwickelt worden.
Was für eine tolle Technik. Dann benötigt man ja auch keine media querys mehr und float wird wegsterben.
Mit Zitat antworten
  #8 (permalink)  
Alt 24.02.2015, 16:20
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

Zitat:
Zitat von seeadler Beitrag anzeigen
Dann benötigt man ja auch keine media querys mehr und float wird wegsterben.
Wie kommst du darauf? Das eine hat mit dem anderen nichts zu tun
Mit Zitat antworten
  #9 (permalink)  
Alt 25.02.2015, 11:43
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Das eine hat mit dem anderen nichts zu tun
hast recht. FlexBox ist einfach genial .
Vielen Dank!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.03.2015, 14:16
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

hallo mrmurphy,

erstmal nochmals Danke für dein Beispiel. Ich habe das allerdings mal im Safari (Windows) ausprobiert und da ist es so, dass sowohl Flexbox als auch der Sticky-Footer mit dem Code komplett ingnoriert wird. Die einzelnen Bereiche (Navigation, main etc.) werden alle untereinander aufgelistet.

Kannst du mir da noch einen Tipp geben, welche Hacks man da noch beachten bzw. einfügen sollte?

hier die Seite: http://www.stars-training.de

Geändert von seeadler (20.03.2015 um 16:09 Uhr)
Mit Zitat antworten
Sponsored Links
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
Mindesthöhe eines <div> einstellen manuu CSS 1 11.08.2011 15:44
Mindesthöhe (min-height) funktioniert nicht, wie es sollte :/ eas CSS 2 10.03.2011 20:51
Absolutes Div mit Mindesthöhe the-indie CSS 4 22.09.2010 12:06
dynamische Höhe bei div + Mindesthöhe mit faux columns? marven CSS 4 09.04.2008 22:46
Mindesthöhe für div im Internet Explorer Philippp CSS 6 10.01.2005 16:09


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:27 Uhr.