È da un po 'di tempo che cerco di far funzionare correttamente il layout di un sito e, sebbene molti dei miei problemi siano stati risolti utilizzando il Sistema a griglia reattivo Un mistero deve ancora essere risolto.
L'intera pagina non avrà alcuno scorrimento e saràuna sola pagina sulla finestra. È essenzialmente una splash page con un ampio menu, quindi il 100% dell'altezza e della larghezza della pagina sarà tutto visibile nella finestra.
Ho un'intestazione con un'altezza massima di 108 px e una lunghezza massima di 800 px. Quando la larghezza della finestra è inferiore a 800 px, l'intero banner si ridimensionerà per adattarsi, rendendo l'altezza sostanzialmente variabile.
Ho anche un piè di pagina, fissato nella parte inferiore del filepagina, con un'altezza fissa di 100px (può variare a seconda delle mie esigenze). Intendo che questo contenga i pulsanti dei social media e le informazioni di contatto, che non avranno bisogno di essere ridimensionati.
Quindi il problema ora è capire come creare il fileil contenuto centrale colma il divario tra di loro. L'area del contenuto verrà riempita completamente con 4 colonne contenenti solo immagini di sfondo e un piccolo testo. L'ho trovato una soluzione utilizzando jquery ma non sembra funzionare. Non conosco molto bene jquery, quindi probabilmente non sto sostituendo tutto ciò di cui ho bisogno.
Ecco cosa ho ottenuto (immagini mantenute per aiutare con il contesto):
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>Qualcuno sa cosa sto sbagliando?
risposte:
0 per risposta № 1Data la descrizione del sito, dovresti essere in grado di utilizzare la posizione assoluta o fissa e alto / basso per gestire questo:
Notare l'overflow del contenuto. Consente di essere scorrevole (in modo che il contenuto possa andare "sotto" in alto e in basso).
<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;
}