J'essaye de faire fonctionner correctement une mise en page de site depuis un certain temps déjà, et bien que nombre de mes problèmes aient été résolus en utilisant le Système de grille réactif Un mystère reste à résoudre.
La page entière n'aura aucun défilement et seraune seule page sur la fenêtre. C'est essentiellement une page de garde avec un grand menu, donc 100% de la hauteur et de la largeur de la page seront tout visibles dans la fenêtre.
J'ai un en-tête avec une hauteur maximale de 108px et une longueur maximale de 800px. Lorsque la largeur de la fenêtre est inférieure à 800 px, la bannière entière sera redimensionnée pour s'adapter, ce qui rend la hauteur essentiellement variable.
J'ai aussi un pied de page, fixé en bas de lapage, avec une hauteur fixe de 100px (peut changer en fonction de mes besoins). J'ai l'intention que cela contienne des boutons de médias sociaux et des informations de contact, qui n'auront pas besoin d'être mis à l'échelle du tout.
Le problème est donc de savoir comment fairele contenu intermédiaire comble le vide entre eux. La zone de contenu sera complètement remplie avec 4 colonnes contenant uniquement des images de fond et un peu de texte. J'ai trouvé une solution utilisant jquery mais cela ne semble pas fonctionner. Je ne connais pas vraiment jquery si bien que je ne remplace probablement pas tout ce dont j'ai besoin.
Voici ce que j'ai obtenu (images conservées pour aider avec le contexte):
var minHeight = 300px; // Define a minimum height for the middle div
var resizeMiddle = function() {
var h = $("html").height() - $(".section header").height() - $(".section footer").height();
h = h > minHeight ? h : minHeight;
$(".section content").height(h);
}
$(document).ready(resizeMiddle);
$(window).resize(resizeMiddle);
html {
height: 100%;
}
body {
background-image: url("http://server.dewcraft.com/doodleplex/storage/themes/KokenTheme/inc/BG.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
overflow-x: hidden;
overflow-y: hidden;
border-collapse: collapse;
margin: 0;
padding: 0;
}
/* SECTIONS */
.section header {
clear: both;
padding: 0px;
margin: 0px;
}
.section content{
clear: both;
padding: 0px;
margin: 0px;
height: 100%;
}
.section footer {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 0% 0 0% 0%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF FOUR */
.span_4_of_4banner {
width: 100%;
text-align: center;
}
.span_4_of_4footer {
width: 100%;
height: 50px;
text-align: center;
position: absolute;
bottom: 0;
}
.banner {
width: 100%;
max-width: 800px;
min-width: 300px;
margin: 0 auto;
}
.span_1_of_4draw {
width: 25%;
height: 100%;
background-attachment: local;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png");
}
.span_1_of_4graph {
width: 25%;
height: 100%;
background-attachment: local;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png");
}
.span_1_of_4pix {
width: 25%;
height: 100%;
background-attachment: local;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png");
}
.span_1_of_4ani {
width: 25%;
height: 100%;
background-attachment: local;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png");
}
footer {
width: auto;
height: auto;
position: absolute;
margin-top: 0;
margin-bottom: 0;
bottom:0;
left:0;
display: table-row;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
<script src="/doodleplex/storage/themes/RonTheme/inc/jquery.bgswitcher.js"></script>
<body>
<div class="section header group">
<div class="col span_4_of_4banner">
<img class="banner" src="/images/https://dl.dropboxusercontent.com/u/8624213/ronochromaticBannerS.png"/>
</div>
</div>
<div class="section content group">
<div class="col span_1_of_4draw">
1 of 4 draw
</div>
<div class="col span_1_of_4graph">
1 of 4 graphics
</div>
<div class="col span_1_of_4pix">
1 of 4 pixelwork
</div>
<div class="col span_1_of_4ani">
1 of 4 animation
</div>
</div>
<div class="section footer group">
<div class="col span_4_of_4footer">
{{ site.copyright }}
</div>
</div>
</body>
</html>Quelqu'un sait ce que je fais mal?
Réponses:
0 pour la réponse № 1Compte tenu de votre description du site, vous devriez pouvoir utiliser la position absolue ou fixe et haut / bas pour gérer cela:
Notez le débordement sur le contenu. Permet de faire défiler (afin que le contenu puisse aller "en dessous" du haut et du bas).
<div class="top">This is your nav bar/header</div>
<div class="content">Put your pages" stuff here</div>
<div class="bottom">This is your footer</div>
.top
{
position: absolute;
top: 0em;
left: 0em;
right: 0em;
height: 4em;
background-color: #cccccc;
}
.content
{
position: absolute;
top: 4em;
bottom: 4em;
left: 0em;
right: 0em;
background-color: yellow;
overflow: hidden;
overflow-y: scroll;
}
.bottom
{
position: absolute;
bottom: 0em;
left: 0em;
right: 0em;
height: 4em;
background-color: #cccccc;
}