Comment puis-je obtenir un en-tête et un pied de page fixes avec un contenu défilable ? Quelque chose comme ceci page . Je peux regarder la source pour obtenir le CSS, mais je veux juste savoir le CSS et le HTML minimum dont j'ai besoin pour que cela fonctionne.
Quelque chose comme ça
<html>
<body style="height:100%; width:100%">
<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
</body>
</html>
Sans rapport avec les votes négatifs, je suis arrivé ici et cela n'a pas fonctionné pour moi (et j'ai copié le style littéralement). Probablement que jQuery Mobile fait des siennes. Mais même si cela fonctionnait, je n'aime pas harcoder les dimensions fixes. Je pense que l'intégration HTML/css est un peu en retrait par rapport aux composants d'interface utilisateur natifs. Sur toutes les plateformes natives avec lesquelles j'ai travaillé, créer des conteneurs déroulants était un jeu d'enfant.
@MisterSmith Désolé j'ai clairement oublié d'ajouter le style pour verrouiller le côté droit des conteneurs. De plus, ce code ne sera rendu qu'à la taille de son conteneur. S'il se trouve sous la balise body et que vous voulez un écran complet, vous devez définir la hauteur et la largeur à 100%. Enfin, en ce qui concerne les styles codés en dur, il s'agit uniquement d'un exemple et non d'une version de production. Je ne mettrai jamais en ligne des styles de ce type, mais cela m'a semblé être une façon plus appropriée d'expliquer la réponse.
@JohnHartsock Définitivement, c'était JQM qui faisait de mauvaises choses. En ce qui concerne les dimensions codées en dur, ce que je n'aime pas, c'est de définir la hauteur absolue en pixels. Dans d'autres plateformes avec lesquelles j'ai travaillé, il était possible de créer un conteneur et de lui dire d'utiliser toute la hauteur dont il avait besoin.
Si vous ciblez les navigateurs supportant les boîtes flexibles, vous pourriez faire ce qui suit http://jsfiddle.net/meyertee/AH3pE/
HTML
<div class="container">
<header><h1>Header</h1></header>
<div class="body">Body</div>
<footer><h3>Footer</h3></footer>
</div>CSS
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
header {
flex-shrink: 0;
}
.body{
flex-grow: 1;
overflow: auto;
min-height: 2em;
}
footer{
flex-shrink: 0;
}Mise à jour :
Voir "Puis-je utiliser" pour Prise en charge par le navigateur des boîtes flexibles .
J'utilise un en-tête et un pied de page dont la hauteur est variable et je pense que cela fera l'affaire. Je vise également les navigateurs les plus récents, heureusement. Je vous remercie.
Super ! Existe-t-il un moyen d'ajouter une autre construction de ce type dans la section .body zone ? Quand je fais ça, l'extérieur .container disparaît de l'affichage dès que l'élément interne .body .body est déroulé jusqu'en bas.
Il fonctionne parfaitement pour les éléments de hauteur connue et inconnue. Assurez-vous de définir la div extérieure à height: 100%; et réinitialiser les paramètres par défaut margin en body . Voir le Tableaux de support des navigateurs .
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.content {
flex: 1;
overflow: auto;
background: pink;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div style="height:1000px;">Content</div>
</div>
<div class="footer">Footer</div>
</div>Pour les éléments de hauteur connue et inconnue. Il fonctionne également dans les anciens navigateurs, y compris IE8.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
display: table;
}
.header, .content, .footer {
display: table-row;
}
.header, .footer {
background: silver;
}
.inner {
display: table-cell;
}
.content .inner {
height: 100%;
position: relative;
background: pink;
}
.scrollable {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
overflow: auto;
}
<div class="wrapper">
<div class="header">
<div class="inner">Header</div>
</div>
<div class="content">
<div class="inner">
<div class="scrollable">
<div style="height:1000px;">Content</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner">Footer</div>
</div>
</div>calc()
Si l'en-tête et le pied de page ont une hauteur fixe, vous pouvez utiliser le CSS calc() .
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
}
.header, .footer {
height: 50px;
background: silver;
}
.content {
height: calc(100% - 100px);
overflow: auto;
background: pink;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div style="height:1000px;">Content</div>
</div>
<div class="footer">Footer</div>
</div>Si la hauteur de l'en-tête et du pied de page est connue, et qu'elle est également exprimée en pourcentage, il suffit de faire le calcul simple pour qu'ils aient tous deux une hauteur de 100 %.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
}
.header, .footer {
height: 10%;
background: silver;
}
.content {
height: 80%;
overflow: auto;
background: pink;
}
<div class="wrapper">
<div class="header">Header</div>
<div class="content">
<div style="height:1000px;">Content</div>
</div>
<div class="footer">Footer</div>
</div>
Maintenant nous avons une grille CSS. Bienvenue en 2019.
/* Required */
body {
margin: 0;
height: 100%;
}
#wrapper {
height: 100vh;
display: grid;
grid-template-rows: 30px 1fr 30px;
}
#content {
overflow-y: scroll;
}
/* Optional */
#wrapper > * {
padding: 5px;
}
#header {
background-color: #ff0000ff;
}
#content {
background-color: #00ff00ff;
}
#footer {
background-color: #0000ffff;
}
<body>
<div id="wrapper">
<div id="header">Header Content</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="footer">Footer Content</div>
</div>
</body>
Depuis 2013 : Ce serait mon approche. jsFiddle :
HTML
<header class="container global-header">
<h1>Header (fixed)</h1>
</header>
<div class="container main-content">
<div class="inner-w">
<h1>Main Content</h1>
</div><!-- .inner-w -->
</div> <!-- .main-content -->
<footer class="container global-footer">
<h3>Footer (fixed)</h3>
</footer>SCSS
// User reset
* { // creates a natural box model layout
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} // asume normalize.css
// structure
.container {
position: relative;
width: 100%;
float: left;
padding: 1em;
}
// type
body {
font-family: arial;
}
.main-content {
h1 {
font-size: 2em;
font-weight: bold;
margin-bottom: .2em;
}
} // .main-content
// style
// variables
$global-header-height: 8em;
$global-footer-height: 6em;
.global-header {
position: fixed;
top: 0; left: 0;
background-color: gray;
height: $global-header-height;
}
.main-content {
background-color: orange;
margin-top: $global-header-height;
margin-bottom: $global-footer-height;
z-index: -1; // so header will be on top
min-height: 50em; // to make it long so you can see the scrolling
}
.global-footer {
position: fixed;
bottom: 0;
left: 0;
height: $global-footer-height;
background-color: gray;
} Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
1 votes
Même question avec ces qualificatifs : angulaire, matérialiser ...
0 votes
Même question mais avec une barre latérale ET où le pied de page n'apparaît pas avant que l'on fasse défiler la chaîne vers le bas ET où l'on ne se retrouve pas avec deux barres de défilement sur le côté droit