Mise en page CSS avec fixe en haut et en bas, hauteur variable moyen

+-------------------+
|    Top (fixed)    |
+-------------------+
|                   |
|                   |
|   Middle (fill)   |
|                   |
|                   |
+-------------------+
|   Bottom (fixed)  |
+-------------------+

La haut et bas sont fixes divs. Ils sont positionnés sur le haut et le bas de la fenêtre du navigateur. Je veux le milieu partie pour remplir le reste de la fenêtre entre le haut et le bas de la vrd.

Si son contenu est plus que sa hauteur alors je peux utiliser les barres de défilement. Mais sa taille ne doit pas dépasser de la fenêtre.

Mon CSS et HTML:

CSS:

html, body, #main
{
  height: 100%;
}
#content
{
  background: #F63;
  width: 100%;
  overflow: auto;
  height: 100%;
  margin-bottom: -100px;
}
#footer
{
  position: fixed;
  display: block;
  height: 100px;
  background: #abcdef;
  width: 100%;
}

HTML:

<div id="main">
  <div id="content">xyz</div>
  <div id="footer">abc</div>
</div>

De cela, le Pied de page affiche dans le fond mais, le Contenu de la div remplit encore la totalité de la fenêtre qui doit avoir été [fenêtre-pied de page] hauteur.

Avez-vous tout code que vous avez essayé jusqu'à présent?
ok je l'ai mis à jour
avoir la hauteur du contenu de height:auto;
Non cela ne fonctionne pas. Il définit la hauteur de la contenu selon le contenu en elle. J'ai besoin de la contenu pour remplir la fenêtre.
lui donner une hauteur spécifiée et l'utilisation overflow:auto
utilisation min-height:

InformationsquelleAutor Ruchan | 2013-06-17

css html

57

Position au milieu de la div à l'aide de positionnement absolu, sans spécifier la hauteur. Il ne va pas beaucoup plus simple que cela:

CSS:
```
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
#content {
    position: fixed;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
    background-color: #F63;
    overflow: auto;
}
```
HTML:
```
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
```
Utiliser "Pleine page" option pour afficher l'extrait de code correctement.
- C'est absolument ce que je voulais 🙂
- aucun des inconvénients, il a?
- Seulement que position: fixed n'est pas pris en charge sur un boiteux navigateurs. Il devrait fonctionner sur la version IE7 ou par la suite.
- c'est une bouée de sauvetage, je vous remercie de Salman.
- Violon si vous voulez jouer avec elle
- Ne fonctionne pas avec wkhtmltopdf à tous - il une idée ?
- il exige de la position: fixed soutien; voir si le moteur de rendu utilise une version moderne de webkit.
- Euh, où est le positionnement absolu dans votre code? Je ne la vois pas dans la #div du contenu. Faute de frappe?
InformationsquelleAutor Salman A

html

<div id="main">
<div id="header"> Header Content</div>    
<div id="content">
    <ul><li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>           
        </ul>
</div>
<div id="footer">I am Footer
</div>

css

      body { margin: 0;}
#main{
   position: absolute;
   width: 100%;
   top: 0;
   bottom: 0;}
#header
{
position: absolute;
height: 41px;
top: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
#content
{
    position: absolute;
    top: 41px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow:scroll;               
}
#footer
{
      position: absolute;
      height: 41px;
      bottom: 0;
      left: 0;
      right: 0;
      text-align:center;
      display:block;
      background: blue;
}

li{
    text-decoration: none;
    display: block;
    height: 20px;
    width: 100%;
    padding: 20px;

}

JSFIDDLE Démo

2015-07-13: Cela ne fonctionne pas. Le JSFiddle démo illustre le problème en se cachant le bas de la flèche de la barre de défilement en dessous du pied de page.

InformationsquelleAutor ANonmous Change

Je pense que c'est ce que u veux...

JSBin: http://jsbin.com/ebilag/1/

CSS:

html, body {
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.top {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    background: yellow;
}

.bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: grey;
}

.middle {
    padding-top: 100px;
    padding-bottom: 100px
}

HTML:

<div class="container">

    <div class="top">Top</div>

    <div class="middle">Middle</div>

    <div class="bottom">Bottom</div>

</div>

ouais! c'est ce que je voulais. 1 chose est manquante si la barre de défilement dans la moyen div. nvm je vais trouver un moyen de le mettre moi-même. Merci
moyen: overflow: auto;
cela ne fonctionne pas.

InformationsquelleAutor Pavel

2

Si vous connaissez la hauteur de l'en-tête et le pied de page...

ensuite, vous pouvez le faire facilement avec le box-sizing propriété.

Comme suit:

FIDDLE1 FIDDLE2
```
.container
{
    height: 100%;
    background: pink;
    margin: -64px 0;
    padding: 64px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content {
    overflow:auto;
    height:100%;
}
header
{
    height: 64px;
    background: purple;
    position: relative;
    z-index:1;
}
footer
{
    height: 64px;
    background: gray;
    position: relative;
    z-index:1;
}
```
- Le moyen barre de défilement est couverte par haut de page et bas divs
- Dans votre question, vous avez déclaré: "Si c'est que le contenu est plus que sa hauteur alors je peux utiliser les barres de défilement. Mais sa taille ne doit pas dépasser la fenêtre" - c'est ce que j'ai compris de qui - que vous ne voulez pas l'ensemble de la fenêtre du navigateur pour faire défiler, seul le contenu de l'article lui-même.
- vous n'obtenez pas de mon point de vue. La barre de défilement est couverte jusqu'. Je veux dire la partie de la barre de défilement est en dessous de la haut de page et bas divs.
- quel navigateur utilisez-vous? Ce que vous décrivez ne se produit pas dans Chrome.
- Je suis en utilisant la plus récente de firefox. et Il arrive aussi dans chrome.
- J'ai mis à jour le violon, il travaille maintenant dans Firefox et
- Grâce Danield. Tu m'as appris quelques nouvelles css tromper avec ce.
- vous êtes les bienvenus!
InformationsquelleAutor Danield
2

Si vous ne connaissez pas l'en-tête ou le pied de page de tailles et vous pouvez utiliser CSS3 alors je suggère d'utiliser flexbox layouting.

Exemple ci-dessous (ou vérifier violon)

HTML:
```
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">bottom</div>
</div>
```
CSS:
```
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 400px;
}

.header {
  flex-grow: 0;
  background-color: red;
}
.content {
  flex-grow: 1;
  background-color: green;
}
.footer {
  flex-grow: 0;
  background-color: blue;
}
```
- Cela ne fonctionne pas. Voir votre violon avec plus de contenu: jsfiddle.net/d0c0jwcb/12 Le pied de page n'est pas fixe, comme décrit dans la question d'origine.
- bon point, mais en ajoutant "overflow: scroll ou cachés" pour ".contenu" permettrait de résoudre la il.
InformationsquelleAutor teo

La solution avec top and bottom padding est ok, mais je vous propose une approche différente où le bâti est conçu comme table. C'est plus souple et vous pouvez vous cacher la tête ou des pieds, sans changer le css.

STYLET (CSS):

html,
body
  height: 100%
.container
  display: table
  height: 100%
.head,
.foot,
.content
  display: table-row
  box-sizing: border-box
.head,
.foot
  height: 70px
  background: #ff0000
.content
  overflow: auto
.scroll
  height: 100%
  overflow: auto
  box-sizing: border-box

HTML:

<div class="container">
  <div class="head">...</div>
  <div class="content">
    <div class="scroll">...</div>
  </div>
  <div class="foot">...</div>
</div>

InformationsquelleAutor xpepermint

HTML:

<div id="main">
    <div id="header">I am Header
    </div>
    <div id="content">I am the Content
    </div>
    <div id="footer">I am Footer
    </div>
</div>

CSS:

#main{width:100%;height:100%;}
#header
{
    position:relative;
    text-align:center;
    display:block;
    background:#abcdef;
    height:40px;
    width:100%;
}
#content
{
    background: #F63;
    width:100%;
    text-align:center;
    height:auto;
    min-height:400px;
}
#footer
{
    position:relative;
    text-align:center;
    display:block;
    background:#abcdef;
    height:40px;
    width:100%;
}

DÉMO

La mise en page est ce que je voulais. Mais il se trompe quand le contenu de contenu div est grande. La taille de contenu est également à la hausse qui devrait être à la hausse, mais montrant la barre de défilement en elle.
overflow:scroll;max-height:400px; ajouter ce contenu . voir est-ce ok jsfiddle.net/dc6uq/3
peut-être overflow:auto; sera bon

InformationsquelleAutor Aravind30790

0

À mon avis vous devriez utiliser js/jquery pour changer le #contenu de la hauteur pendant le chargement de la page.
Ce devrait être quelque chose comme ça (je ne l'ai pas testé le code ci-dessous, afin de le modifier comme vous le besoin):
```
$().ready(function(){
  var fullHeight= function(){
  var h=$(window).height()-100; //100 is a footer height
  $('#content').css('min-height',h+'px');
};

$(window).resize(fullHeight);
fullHeight();
});
```
- oh non, pas de javascript.
InformationsquelleAutor Piotr Giniewski

Veuillez essayer ceci:

HTML

<div id="header">
header
</div>
<div id="content">
main content
</div>
<div id="footer">
footer
</div>

CSS

html,body{
  marign: 0;
  padding: 0;
  height: 100%;
}
#header {
  height: 100px;
  position: fixed;
  top: 0;
  left:0;
  right: 0;
  background: orange;
}
#footer {
  height: 100px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: green;
}
#content {
  padding-top: 100px;
  padding-bottom: 100px;
  height: -webkit-calc(100% - 200px);
  height: -moz-calc(100% - 200px);
  height: -ms-calc(100% - 200px);
  height; -o-calc(100% - 200px);
  height: calc(100% - 200px);
  background: #ccc;
}

veuillez consulter le démo.

Il en résulte même que #Pavel

InformationsquelleAutor Airen

Vous devez vous connecter pour publier un commentaire.