p_lombi: 100% Container

SELF-Forum

100% Container

p_lombi
– Informationen zu den Bewertungsregeln

Hi

Typisches CSS Problem, aber nach langem Googeln immer noch keine Lösung gefunden:

Ich habe einen "Main Container" definiert, in diesem Container habe ich einen zweiten Container gebaut. Der zweite Container sollte 100% lang sein. Leider passiert nichts.
Der zweite Container wird nur so lang, wie sein Inhalt.

Hier mein Code für die zwei Container:

body, html {
 height: 100%;
 min-height: 100%;
 margin:0;
 padding:0;
}

#container {
 margin:0 auto;
 width:766px;
 min-height: 100%;
 height: 100%;
}

.subcontainer{
 float:left;
 width:207px;
 padding-top:3px;
 border:1px solid red;
 height:100%;
 min-height:100%;
}

Vielen Dank im Voraus für eure Bemühungen!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 100% Container

    Downlord
    +1 Informationen zu den Bewertungsregeln

    Moinsen

    Bei mir klappt es (im IE7 und FF2).

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  
<html>  
<head>  
 <title>Untitled</title>  
<style>  
body, html {  
 height: 100%;  
 min-height: 100%;  
 margin:0;  
 padding:0;  
}  
  
#container {  
 margin:0 auto;  
 width:766px;  
 min-height: 100%;  
 height: 100%;  
}  
  
.subcontainer{  
 float:left;  
 width:207px;  
 padding-top:3px;  
 border:1px solid red;  
 height:100%;  
 min-height:100%;  
}</style>  
</head>  
  
<body>  
<div id="container"><div class="subcontainer">x</div></div>  
</body>  
</html>

    Vielleicht klappt es bei Dir nicht, weil
    du evtl. übersehen hast, dass du
    "container" als ID und "subcontainer" als Klasse
    angelegt hast?

    #container {
    .subcontainer{

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. 100% Container

      John
      – Informationen zu den Bewertungsregeln

      Hi

      dazu habe ich 2 Fragen, warum wird bei folgenden HTML-Code ein Scrollbalken angezeigt?

      <?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">  
<head>  
 <title>Untitled</title>  
<style type="text/css">  
<!--  
body, html {  
  height: 100%;  
  min-height: 100%;  
  margin: 0;  
  padding: 0;  
}  
#container {  
  margin: 0 auto;  
  width: 766px;  
  min-height: 100%;  
  height: 100%;  
  border: 1px solid green;  
}  
//-->  
</style>  
</head>  
  
<body>  
<div id="container"><p>x</p></div>  
</body>  
</html>

      warum wird bei folgenden Code (mit CDATA) die Höhe von 100% ignoriert?

      <?<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">  
<head>  
 <title>Untitled</title>  
<style type="text/css">  
<!--  
// <![CDATA[  
body, html {  
  height: 100%;  
  min-height: 100%;  
  margin: 0;  
  padding: 0;  
}  
#container {  
  margin: 0 auto;  
  width: 766px;  
  min-height: 100%;  
  height: 100%;  
  border: 1px solid green;  
}  
// ]]>  
//-->  
</style>  
</head>  
  
<body>  
<div id="container"><p>x</p></div>  
</body>  
</html>

      John

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. 100% Container

        Downlord
        – Informationen zu den Bewertungsregeln

        Hi

        dazu habe ich 2 Fragen, warum wird bei folgenden HTML-Code ein Scrollbalken angezeigt?

        Das hängt zum einen an der Border-Definition von #container und zum anderen an dem im Div einleitenden <p>-Tag der standardmäßig ja auch einen margin>0 hat.
        Nimm den Border des äußeren Divs weg (setze zum Testen von mir aus eine Hintergrundfarbe) und setze per CSS für <p> ein margin-top von 0px.

        <!--
        [...]
        //-->
        </style>

        warum wird bei folgenden Code (mit CDATA) die Höhe von 100% ignoriert?

        Weil CDATA, soweit ich weiß, dazu dient eben NICHT als Markup interpretiert wird.

        Gruß,
        DL

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln