Я вже давно намагаюся забезпечити належну роботу макета сайту, і хоча багато мої проблеми вирішувались за допомогою Адаптивна сіткова система Одна загадка ще не розгадана.
На всій сторінці не буде прокрутки і бутиодна сторінка на вікні. Це, по суті, сплеск сторінки з великим меню, тому 100% висоти та ширини сторінки будуть усім видимими у вікні.
У мене є заголовок з максимальною висотою 108px та максимальною довжиною 800px. Коли ширина вікна менше 800 пікселів, весь банер буде змінюватися відповідно до розміру, роблячи висоту істотно змінною.
У мене також є нижній колонтитул, закріплений внизусторінки із фіксованою висотою 100 пікселів (може змінюватися залежно від моїх потреб). Я маю намір для цього містити кнопки соціальних мереж та контактну інформацію, які взагалі не потребуватимуть масштабування.
Отже, питання зараз полягає в тому, щоб зрозуміти, як зробитисередній вміст заповнює прогалину між ними. Область вмісту буде заповнена повністю на 4 стовпці, що містять лише фонові зображення та трохи тексту. Я таки знайшов одне рішення з використанням jquery але це, здається, не працює. Я насправді не дуже добре знаю jquery, тому я, мабуть, просто не замінюю все, що мені потрібно.
Ось, що я отримав (зображення зберігаються, щоб допомогти в контексті):
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>Хто-небудь знає, що я роблю неправильно?
Відповіді:
0 для відповіді № 1Давши вам опис сайту, ви повинні мати можливість використовувати абсолютну або фіксовану позицію та верх / низ для обробки цього:
Зверніть увагу на переповнення вмісту. Дозволяє прокручувати (щоб вміст міг знаходитись «знизу» зверху та знизу).
<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;
}