CSS 100% de la hauteur du corps et de l'élément

Je vais avoir un problème de prise de l'un de mes éléments 100% dans le cadre d'une mise en page qui est à 100%.

J'ai essayé différentes solutions de positionnement et je soit jusqu'à la fin avec le contenu caché de la flotte derrière le pied de page en bas, ou le contenu finit par aller derrière le pied de page, et les carrys, après le pied de page.

Voici ce que j'ai pour la mise en page.

<!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" lang="en-US">

<head>
<style>
    *{margin:0}
    html,body{margin:0; padding:0; height:100%}
    .wrapper{position:relative; margin:0 auto -200px; height:auto !important; height:100%; min-height:100%}
    .container{width:930px; margin:0 auto; text-align:left}
    .right{float:right; width:680px; background:#FFF; margin:60px 10px 0 0; padding:0}
    .left{float:left; width:240px}
    .content{padding:10px}
    .footer{position:absolute; width:100%}
    .footer,.push{height:200px}
</style>
</head>

<body>

<div class="wrapper">
<div class="container">
<div id="left">
   left
</div>
<div class="right">

<div class="content">
    content
</div>

</div>
<div class="push"></div>
</div>
<div class="footer">
    footer
</div>
</div>

</body>
</html>

La mise en page de la page à 100% de la hauteur et de pied de page en bas de travaux de la div avec le nom de la classe de contenu que j'aimerais être à 100% ainsi, et poussez le pied de page plus bas si le contenu atteint le pied de page et de ne pas disparaître.

Toute aide appréciée.

http://img686.imageshack.us/img686/7725/screenshotbj.png

vous pourriez avoir plus de chance à la sœur du site doctype.com
fixer votre code html à tout montrer et je vais corriger votre style pour vous
fixe, désolé qu'il travaillait jusqu'à ce que vous
+1 pour un déplacement doctype.com, si je pouvais voter 🙂
J'ai signé et publié avec doctype.com c'est très bien comme sur ce site. Merci pour cela!

OriginalL'auteur Tim | 2010-06-05

css

12

Répondre animuson: en fait, le code suivant est nécessaire pour IE6 support:
```
min-height: 100%; /* real browsers */
height: auto !important; /* real browsers */
height: 100%; /* IE6: treated as min-height*/
```
IE6 ne comprends pas !important, mais il ne traiter hauteur min-height. Afin de soutenir à la fois IE6 et moderne navigateur, vous devez utiliser le même code (l'ordre est important).

Cela a été très utile, merci à vous.
Cela a fonctionné pour moi en mettant cela dans mon corps, css et "height:100%" dans le html, css.

OriginalL'auteur AMilassin

La bonne css devrait ressembler à ceci:

<style type="text/css" media="screen">
    html,body
    {
        margin:0; padding:0; height:100%;
    }
    .wrapper
    {
        position:relative;
        min-height:100%;
        /*background: #fef;*/
    }
    .container
    {
        margin: 0 auto;
        width: 930px;
        padding: 0 0 200px 0; /*200 pixels at the bottom, to stay over the footer*/
        /*background: #fff; */
    }
    .left /* This was one cause. Old line: <div id="left">, new line: <div class="left"> */
    {
        float: left;
        width: 240px;
        /*background: #efe;*/
    }
    .right
    {
        float: left;
        width: 690px; 
        /*background: #efa;*/
    }
    .right .content
    {
        padding: 10px;
    }
    .clear
    {
        clear: both;
    }
    .footer
    {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        /*background: #eff;*/
    }
</style>

Je suis sûr que cela va vous aider.

<div class="wrapper">
    <div class="container">
        <div class="left">
           left
        </div>
        <div class="right">

            <div class="content">
                content
            </div>

        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        footer
    </div>
</div>

Ce sera comme tu le voulais. Le pied de page en bas, à chaque fois, tout comme vous voulais de l'avoir 🙂
Espérons que cela aide!

J'ai essayé cette solution et il me donne le même scénario. Mon problème n'est pas avec le pied de page c'est avec la colonne de droite de ne pas être à 100% de la hauteur. Quand j'grâce au positionnement dans le div, il fonctionne sauf le texte se perd derrière le pied de page. Fondamentalement, je suis en train d'essayer d'obtenir un 100% de la hauteur de l'élément à l'intérieur d'un élément déjà défini à 100% - je pense que ce n'est pas possible puisque je ne peux pas trouver une solution, n'importe où, à moins que je vais JS - dont je ne suis pas prêt à le faire.
Pas préparé comme dans... vous ne savez pas JS ou ne sont pas en mesure d'utiliser le javascript dans votre solution en raison des contraintes du patron?
J'ai fait une capture d'écran sur ce que j'obtiens quand j'utilise votre disposition ci-dessus. img7.imageshack.us/img7/7949/screenshotoil.png
Voici quelque chose que je jongle avec et juste ne sais pas comment le faire fonctionner, a été de rendre l'arrière-plan du conteneur plus et s'étendre à l'infini afin de parler. Puis-je sortir avec qui? Comme pour le JS j'ai essayé et j'ai eu des questions sur la lorsque le navigateur redimensionnée. Je suis formellement un programmeur PHP et le front gars a tiré. Besoin d'un emploi!
regardez, j'ai trouvé quelque chose pour vous 🙂 matthewjamestaylor.com/blog/...

OriginalL'auteur Max Ruf

2

Sans être capable de regarder le code jusqu'à ce qu'un peu plus tard, j'avais suggust mettre la classe "clearfix" sur le div qui n'est pas entièrement expandning avec le blanc.

Ici est l'endroit où vous pouvez obtenir une bonne définition de ce qu'clearfix", et une définition pour le css.

Essayé le clearfix et il n'est toujours pas tomber le côté droit à 100% de la hauteur du corps.

OriginalL'auteur TheGeekYouNeed
2

Une autre solution est d'utiliser javascript (évidemment pas la façon la plus propre, mais dans certains cas, il peut être utile).

À l'aide de jQuery:
```
//Get height
var divHeight = $('#div').height();

//Apply css rule
$('#anotherDiv').css('height', divHeight);
```
OriginalL'auteur LBridge
2

Assez tard pour répondre, mais il peut aussi être utile pour les autres.
Vous pouvez simplement utiliser 100vh (vh est viewport unité de hauteur)

OriginalL'auteur theogrost
0

Dans votre pied de page de code a position:absolute, mais la position réelle (par exemple. bottom: 30px;) n'est pas donné. Aussi, si vous le souhaitez .contenu ou .pousser à affecter la .pied de position, ils doivent être dans le même flux (par exemple. position:static;). Donnant à pied de position:absolute, par définition, prend le pied de page de positionnement de la circulation normale, alors cela est incompatible avec l'objectif.

Je suppose que ce que vous essayez de faire est d'obtenir une page qui est à 100%, même avec peu de contenu, et un pied de page qui est toujours sur le bas de la page-écran.

FooterStickAlt est une bonne solution de navigateur pour y parvenir.
http://www.themaninblue.com/experiment/footerStickAlt/

Oui, j'ai ceci à l'aide de cette mise en page - cssstickyfooter.com Maintenant, je suis en ajoutant à gauche et à droite des éléments que je voudrais au moins le droit d'être à 100% de la hauteur pour réaliser le fond blanc de la page. Comme il est maintenant avec le contenu, il a l'air bien, si il n'a pas ou peu de contenu, le blanc n'est pas appliqué. img686.imageshack.us/img686/7725/screenshotbj.png

OriginalL'auteur Marcus
0

Trouvé ma solution basée sur le plomb que le Cen a écrit cherché à 100% de Mise en page avec les Faux Colonnes et a obtenu ce http://www.savio.no/examples/three-column-layout-6.asp

Avec un peu de peaufinage et de l'épissage de ma mise en page différente, je suis venu avec la solution suivante qui fonctionne sur tous les navigateurs.

OriginalL'auteur Tim

Vous devez vous connecter pour publier un commentaire.