✔ Min-Height geht nicht bei IE & FireFox

E

EddieG

Erfahrenes Mitglied
Hi,
ich bin dabei ein Template komplett mit Div's zu erstellen, nun hänge ich aber an einer kleinen Sache und zwar min-height.
ich habe der id meines div's in der css:
min-height:100%; eingetragen.
Im Opera geht es super im firefox und IE jedoch nicht.
Code: 
#content{
  background:url(images/bg.gif) top right repeat-y;
  margin-left:40px;
  bottom:0;
  padding-top:10px
  padding-left: 40px;
  padding-right:40px;
  margin-top: 0px;
  margin-bottom:0px;
  min-height:100%;
  min-height:auto !important;
  height: auto !important;
  height:100%;  
  width:91.5%;
  position:relative;
 
}
jemand eine Idee?
 
Hi,

falls dein HTML-Dokument im standardkonformen Modus übergeben wird, und dies das Elternelement aller nachfolgenden Seitenbereiche ist, fehlt noch diese CSS-Regel:

CSS: 
html,body { height:100%; }

mfg Maik
 
Gib doch bitte ein komplettes HTML + CSS Beispiel, welches das Problem enthält. Was ist denn das Elternelement deines Div, denn darauf bezieht sich ja die Prozentangabe?
 
Es wird ein template für Wordpress
die height angabe
Code: 
html,body{height:100%;}
habe ich auch schon drinnen.
grob gesagt so schaut es aus
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
<meta name="content-language" content="v"/>
<meta name="robots" content="index,follow"/>
<meta name="revisit-after" content="4 day"/>
  <link rel="stylesheet" type="text/css" href="wp-content/themes/test/style_ohne_ie.css" media="screen"/>


    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php //comments_popup_script(); // off by default ?>
    <?php wp_head(); ?>
</head>

<body>

<div id="left_bg" >

<div id="content">


<div id="header_box">Hi.. </div>

<div id="header">

<div id="img_left"></div>
<div id="img_middle></div>
</div>
<div id="subtitle">home | Kontakt | Impressum</div></div>


<?php get_sidebar(); ?>
..
</div>

</div>
<?php do_action('wp_footer'); ?>

</div>

</div>

</body>
</html>

dieser div liegt über dem content div sozusagen das mutterelement
Code: 
html , body{
       height:100%;
       color: #6f6f6f;
       background: #000;
       font: 12px Verdana, helvetica, sans-serif;
       margin: 0;
         }

#bg_left{
    background:#000 url(images/bg_left.gif) top left repeat-y;    
    margin-left:15px;
    margin-bottom:0;
    min-height:100%;    
    min-height:auto !important;
    height:auto !important;
    height:100%;  
    width:99%;
     
}
 
Heißt es nun "bg_left" oder "left_bg"? Eines von beiden stimmt in deinem HTML- oder CSS-Code nämlich nicht.

Die Höhe des inneren Blockelements lässt sich nicht ananlog zu #bg_left auf eine Mindesthöhe mit 100% strecken, dies ist nur dem Elternelement vorbehalten.

Stattdessen könntest du das Hintergrundbild von #bg_left für den Dokumentkörper <body> nutzen, und dieses DIV aus dem Markup entfernen.

Zum Studium der Technik empfehle ich dir mein Tutorial CSS-Layout mit 100%-Höhe (incl. herunterladbaren Beispielen).

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück