Já faz algum tempo que estou tentando fazer com que o layout de um site funcione corretamente e, embora muitos dos meus problemas tenham sido resolvidos com o Sistema de grade responsivo Um mistério ainda não foi resolvido.
A página inteira não terá rolagem e seráuma única página na janela. É essencialmente uma página inicial com um grande menu, então 100% da altura e largura da página será tudo visível na janela.
Eu tenho um cabeçalho com altura máxima de 108 px e comprimento máximo de 800 px. Quando a largura da janela for inferior a 800 px, todo o banner será redimensionado para caber, tornando a altura essencialmente variável.
Eu também tenho um rodapé, fixado na parte inferior dopágina, com altura fixa de 100px (pode mudar dependendo das minhas necessidades). Pretendo que isso contenha botões de mídia social e informações de contato, que não precisam ser escalonados.
Portanto, o problema agora é descobrir como fazer oo conteúdo intermediário preenche a lacuna entre eles. A área de conteúdo será totalmente preenchida com 4 colunas contendo apenas imagens de fundo e um pouco de texto. Eu encontrei uma solução usando jquery mas não parece estar funcionando. Eu realmente não conheço o jquery muito bem, então provavelmente não estou substituindo tudo que preciso.
Aqui está o que consegui (imagens mantidas para ajudar no contexto):
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>Alguém sabe o que estou fazendo errado?
Respostas:
0 para resposta № 1Com a descrição do site, você deve ser capaz de usar a posição absoluta ou fixa e superior / inferior para lidar com isso:
Observe o estouro no conteúdo. Permite que seja rolável (para que o conteúdo possa ir "por baixo" da parte superior e inferior).
<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;
}