2009-11-09 5 views
1

Actuellement, j'ai un code comme celui-cihauteur de problème css 100%

<!DOCTYPE HTML PUBLIC "-// W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"> 
<html><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 
body { 
background:#000; 
} 

#header{ 
    float:right; 
    width:800px; 
} 

#topbar { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 30px; 
} 

#container-box{ 
    margin:0px auto; 
    border:1px solid black; 
    width:950px; 
    margin-top:40px; 
    height:550px; 
} 

#image-box{ 
    border:3px solid Black; 
    position:absolute; 
    float:left; 
    width:120px; 
    height:120px; 
    z-index:1000; 
    background:#000099; 
} 

#inside-box{ 
    z-index:-100; 
    margin:0px auto; 
    border:1px solid #737373; 
    width:900px; 
    margin-top:50px; 
    height:100%; 
} 

#inside-left{ 
    float:left; 
    border-right:1px solid #737373; 
    width:250px; 
    height:100%; 
    text-align:bottom; 
} 

#inside-right{ 
    float:right; 
    width:649px; 
    color:#FFFFFF; 
} 

#right-top{ 
    float:left; 
    width:649px; 
    height:375px; 
    border-bottom:1px solid #737373; 
} 

#right-btm{ 
    float:left; 
    padding-top:5px; 
    width:649px; 
    height:150px; 
} 

#footer{ 
    color:#c3c3c3; 
} 
#footer #footer_left{ 
    float:left; 
    width:200px; 
    font-size:9px; 
    margin-top:5px; 
    margin-left:30px; 
    text-align:left; 
} 

#footer #footer_right{ 
    float:right; 
    width:500px; 
    font-size:14px; 
    margin-right:30px; 
    margin-top:5px; 
    text-align:right; 
} 
#footer #footer_right .linkage{ 
    float:right; 
    margin-right:20px; 
} 


#footer #footer_right .linkage a{ 
    color:#c3c3c3; 
    text-decoration:none; 
} 

</style> 
</head> 
<div id="header"> 
<div id="topbar"></div> 
</div> 

<div id="container-box"> 
    <div id="image-box"></div> 
    <div id="inside-box"> 
     <div id="inside-left"> 
      <table width="100%" cellspacing="15px" height="100%"> 
       <tbody><tr valign="bottom"> 
        <td> 
                <div class="elements"></div> 
               <div class="elements"></div> 
        </td> 
       </tr> 
      </tbody></table> 
     </div> 
     <div id="inside-right">The inner German border was the frontier between the German Democratic Republic (East Germany) and the Federal Republic of Germany (West Germany) from 1949 to 1990. Not including the similar but physically separate Berlin Wall, the border was 1,381 kilometres (858 mi) long and ran from the Baltic Sea to Czechoslovakia. It was formally established on 1 July 1945 as the boundary between the Western and Soviet occupation zones of Germany. On the Eastern side, it was made one of the world's most heavily fortified frontiers, defined by a continuous line of high metal fences and walls, barbed wire, alarms, trenches, watchtowers, automatic booby-traps and minefields. The border was a physical manifestation of Winston Churchill's metaphor of an Iron Curtain separating the Soviet and Western blocs during the Cold War. Built by East Germany in phases from 1952 to the late 1980s, the fortifications were constructed to stop the large-scale emigration of East German citizens to the West. It caused widespread economic and social disruption on both sides. On 9 November 1989, the East German government announced the opening of the Berlin Wall and the inner German border. The inner German border was not completely abandoned until 1 July 1990, exactly 45 years to the day since its establishment, and only three months before German reunification formally ended Germany's division. Little remains today of the inner German border's fortifications. The inner German border was the frontier between the German Democratic Republic (East Germany) and the Federal Republic of Germany (West Germany) from 1949 to 1990. Not including the similar but physically separate Berlin Wall, the border was 1,381 kilometres (858 mi) long and ran from the Baltic Sea to Czechoslovakia. It was formally established on 1 July 1945 as the boundary between the Western and Soviet occupation zones of Germany. On the Eastern side, it was made one of the world's most heavily fortified frontiers, defined by a continuous line of high metal fences and walls, barbed wire, alarms, trenches, watchtowers, automatic booby-traps and minefields. The border was a physical manifestation of Winston Churchill's metaphor of an Iron Curtain separating the Soviet and Western blocs during the Cold War. Built by East Germany in phases from 1952 to the late 1980s, the fortifications were constructed to stop the large-scale emigration of East German citizens to the West..</div> 
</div> 

</div> 
</body> 
</html> 

La sortie est comme ça.

alt text http://img694.imageshack.us/img694/6610/outputcss.png

Actuellement, le contenu est dans la boîte, car il est pas atteint encore. Mais quand le contenu dépasse la hauteur. Ça va être comme ça. Parce que je définis la hauteur fixe.

S'il vous plaît voir cette image

alt text http://img5.imageshack.us/img5/9440/outputcss2.png

Mais quand je change toute la hauteur de la hauteur de 100%, il ne fonctionne pas. La sortie est modifiée comme celui-ci

alt text http://img200.imageshack.us/img200/3120/outputcss3.png

Quelqu'un peut-il me aider à résoudre ce problème? Merci beaucoup.

Avec Cordialement,

Répondre

1

Je crois que votre problème a à voir avec le fait que tant à l'intérieur-gauche et à l'intérieur-droit t sont des éléments flottants dans la div contenant. Si vous ajoutez ce qui suit à votre feuille de style:

#inside-bottom{ 
    clear:both; 
} 

Et puis ajoutez ce qui suit juste au-dessous la définition de votre div intérieur droite:

<div id="inside-bottom"></div> 

Vous obtiendrez un bien meilleur résultat.

+0

Passer le ''   et il suffit d'utiliser ''

. Sinon, le navigateur affichera le div avec une certaine hauteur car il doit afficher ' '. Ce div clair est censé être invisible. –

+0

merci Gene, il a résolu mon problème. Mais une seule chose, s'il vous plaît voir cette image. http://img200.imageshack.us/img200/9853/outputcss3u.png Mais la bordure gauche devrait être jusqu'au fond. Mais c'est seulement sur le dessus. Comment puis-je résoudre ce problème? Merci. – spotlightsnap

+0

Votre défi est qu'il n'y a aucun moyen de contrôler la hauteur d'un div flottant en fonction de la hauteur d'un autre div flottant. Jetez un oeil à cet article sur les mises en page CSS en 2 colonnes: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/. Portez une attention particulière à l'information juste avant l'étape 7: elle décrit des solutions de contournement alternatives pour obtenir l'effet que vous désirez. Vous vous demandez peut-être: cela ne devrait-il pas être plus facile? La réponse est oui, ça devrait l'être (surtout si l'on considère la fréquence de ce problème), mais malheureusement je ne le crois pas. –

0

Il a été un certain temps depuis que je suis codé CSS, mais n'est pas là un moyen de tourner la barre de défilement? Cela serait-il utile et rendrait cette boîte défilante?

Mieux encore, je pense qu'il est un attribut appelé débordement. Je suis assez sûr que si vous désactivez le débordement (dans inside-right) il devrait résoudre votre problème.

Espérons que cela aide. Désolé si je me trompe complètement.

0

intérieur CSS pour

#inside-box ajouter {overflow:auto;}

#inside-right ajouter {border: 1px solid #fff;}

Inform si vous obtenez correct

Merci

Questions connexes