Page HTML avec un en-tête standard de pied de page mise en page sans l'aide de balise table

Page HTML avec un en-tête standard de pied de page mise en page sans l'aide de balise table

Comment puis-je atteindre ce qui est montré dans l'image, sans l'aide de tables? Je veux la présentation pour la durée de la totalité de la hauteur/largeur de la page, même si la fenêtre du navigateur est redimensionnée.

C'est ce que j'ai essayé jusqu'à présent. Ses proches, mais n'a pas l'air professionnel.

<html>
<body>
    <div>
        <div style="border-style: solid; height: 20%">
            Header</div>
        <div style="overflow: hidden; height: 55%">
            <div style="border-style: solid; float: left; width: 20%; height: 100%;">
                left</div>
            <div style="border-style: solid; float: left; width: 57%; height: 100%;">
                content</div>
            <div style="border-style: solid; float: left; width: 20%; height: 100%;">
                right</div>
        </div>
        <div style="border-style: solid; height: 20%">
            Footer</div>
    </div>
</body>
</html>

Propre et simple css serait grandement apprécié.

  • Rechercher une grille CSS framework comme Twitter Bootstrap. Aussi, la recherche css mises en page flexibles.
  • Vous avez un bon point de départ. Je me concentrerais sur la révision de votre code existant et migration de tous vos styles à une feuille de style externe. Votre contour de ne pas ressembler exactement à votre image, car vous avez besoin de contenu (ou le besoin de définir des hauteurs) pour qu'elle apparaissent de cette manière.
InformationsquelleAutor Foo | 2013-03-26
  1. 5

    Toto, ce que vous devez faire est d'obtenir une bonne base en HTML et CSS avant de tenter cela. Idéalement, vous voulez éviter de styles en ligne (par exemple style="border: 1px solid black;"). Vous n'avez pas besoin de fixe ou de positionnement absolu pour accomplir cette tâche. Il est tout à fait faisable avec base en HTML/CSS savoir-faire. Voici une solution alternative à ce que vous vous dîtes:

    <div class="header">
    <div class="header-inner"></div>       
</div>
<div class="content">
    <div class="sidebar left">
        <div class="sidebar-inner"></div>
    </div>
    <div class="content-inner"></div>
    <div class="sidebar right">
        <div class="sidebar-inner"></div>
    </div>
</div>
<div class="footer">
    <div class="footer-inner"></div>
</div>

    Et le CSS:

    /* Temp styles */
.header, .sidebar, .content, .footer { border: 5px solid black; }
.content, .sidebar, .footer { border-top: none; }
.sidebar.right { border-right: none; }
.sidebar.left { border-left: none; }
/* Core styles */
.header {
    position: relative; /* needed for stacking */
    height: 100px;
    width: 100%;
}
.content {
    position: relative; /* needed for stacking */
    width: 100%;
    height: 500px;
}
.sidebar {
    position: relative; /* needed for stacking */
    width: 20%;
    height: 100%;
    border-top: none;
}
.sidebar.left { float: left; }
.sidebar.left:after,
.sidebar.right:after {
    clear: both;
    content: "
    /* Temp styles */
.header, .sidebar, .content, .footer { border: 5px solid black; }
.content, .sidebar, .footer { border-top: none; }
.sidebar.right { border-right: none; }
.sidebar.left { border-left: none; }
/* Core styles */
.header {
position: relative; /* needed for stacking */
height: 100px;
width: 100%;
}
.content {
position: relative; /* needed for stacking */
width: 100%;
height: 500px;
}
.sidebar {
position: relative; /* needed for stacking */
width: 20%;
height: 100%;
border-top: none;
}
.sidebar.left { float: left; }
.sidebar.left:after,
.sidebar.right:after {
clear: both;
content: "\0020";
display: block;
overflow: hidden;
}
.sidebar.right { float: right; }
.footer {
position: relative; /* needed for stacking */
width: 100%;
height: 100px;
}
    20"    ;
    display: block;
    overflow: hidden;
}
.sidebar.right { float: right; }
.footer {
    position: relative; /* needed for stacking */
    width: 100%;
    height: 100px;
}

    Ici est un démo. Profiter de cette démo et apprendre de lui! Espérons que cette aide!

    • Cela ne veut pas répondre au critère de la étendant sur toute la hauteur de la page. Vous avez la hauteur codé en dur à 500px;
    • Il est évident que la hauteur fixe la valeur est pour l'affichage des raisons seulement. J'imagine que l'interlocuteur a pu déduire que c'était pour la démo raisons seulement.
    • Retrait de la hauteur fixe de déplacer le pied de page vers le haut. Il voulait la disposition "pour la durée de la totalité de la hauteur".
    InformationsquelleAutor djthoms
  2. 1

    Utiliser le position: fixed (TOUS) avec top: 0px; (en haut div) , right: 0px; (à droite div),
    left: 0px; (à gauche div), bottom: 0px; (en bas de la div)

    Positions fixes devraient aider dans votre cas

    EDIT: voici le code de travail:

        <div>
        <div style="border-style: solid; height: 20%; position: fixed; top: 0px; width: 100%;">
            Header
        </div>
        <div style="overflow: hidden; height: 55%">
            <div style="border-style: solid; float: left; width: 20%; height: 60%; position: fixed; left: 0px; top: 20%;">
                left
            </div>
            <div style="border-style: solid; float: left; width: 55%; height: 60%; position: fixed; top: 20%; left: 20%;">
                content
            </div>
            <div style="border-style: solid; float: right; width: 20%; height: 60%; position: fixed; right: 0px; top: 20%;">
                right
            </div>
        </div>
        <div style="border-style: solid; height: 20%; position: fixed; bottom: 0px; width: 100%;">
            Footer
        </div>
    </div>
    • Qui a tout fait foiré.
    • pouvez-vous me dire comment se fait-il manquer de place ? je veux dire, comment a été la mise en page après l'application de ce code ?
    • Vous devriez lire à propos de correction du positionnement, pour la comprendre, @Foo
    • Veuillez trouver la mise à jour avec le code @Foo
    • Je pense que Muhammad est la solution fonctionne. C'est juste que vous avez à faire quelques ajustements. N'oubliez pas de commencer avec des <!DOCTYPE html>, et insérer de Muhammad codes, mais faire les réglages suivants: pour le style de bordure :0; tous ensuite, essayez d'ajuster leur largeur et le haut et la hauteur pecentages et les pixels pour la rendre plus pertinente
    InformationsquelleAutor Muhammad Omar ElShourbagy
  3. 0

    css :

    #header
{
 position:fixed;
 top:0px;
 left:0px;
 right:0px;
 height:20%;
 overflow:hidden;
}
#leftSide
{
 position:fixed;
 top:21%;
 left:0px;
 width:20%;
 bottom:21%;
}
#rightSide
{
 position:fixed;
 top:21%;
 right:0px;
 width:20%;
 bottom:21%;
}
#footer
{
 position:fixed;
 height:20%;
 left:0px;
 right:0px;
 bottom:0px;
}
#content
{
 position:fixed;
 top:21%;
 bottom:21%;
 left:21%;
 width:57%;
}
div {display:block; border:1px solid black;}

    html :

    <div id="header">header</div>
 <div id="leftSide">left</div>
 <div id="content">content</div>
 <div id="rightSide">right</div>
 <div id="footer">footer</div>

    dans cet exemple, j'utilise fixed position, mais vous pouvez définir overflow-x et overflow-y pour tous de cette division.
    par exemple: pour content vous pouvez utiliser overflow-x:hidden et overflow-y:auto ou scroll et ainsi de suite pour chaque div.
    bien sûr, la page ne sera pas en défilant dans cet exemple.

    InformationsquelleAutor nelek
  4. 0

    Je suppose que vous avez déjà trouvé une solution maintenant, la question est de près de deux ans. Toutefois, d'autres personnes pourraient tomber sur ce post, si ce n'est pour référence future:

    Jetez un oeil à cette réponse et cochez la JSFiddles. C'est relativement solide de la solution à l'aide de CSS tables (pas de mise en page HTML-tables).

    InformationsquelleAutor armin