Здравствуй,
Я действительно не знаю, как я могу исправить это isse, потому что у меня есть некоторые страницы без какого-либо контента, но структура шаблона оставляет остальную часть страницы пустой.
Я попытался применить несколько методов с помощью css или jquery, и я не мог найти решение. Может кто-нибудь мне помочь?
это код на данный момент:
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
font-size: 12px;
font-family: 'Tahoma' sans-serif;
color: #1c1c1c;
}
#wrapper {
min-height: 100%;
}
/* Header */
header {
width:100%;
background:#454545;
height: 100%;
}
#main {
overflow:hidden;
}
.content {
width:86%;
height: 100%;
padding:10px;
margin-left:5px;
float:left;
background:#FFF;
}
.sidebar {
padding:1px;
width:12%;
background:#FF8500;
float:left;
padding-bottom: 30000px;
margin-bottom: -30000px;
}
footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
padding:10px;
background:#000;
text-align:right;
color:#FFF;
}
Я разделяю html: http://jsfiddle.net/7r2SG/2/
EDIT: Исправлены ошибки. В основном, чтобы установить высоту элемента, сначала нужно знать высоты родителя.
Вы увидите высоту, удаленную из заголовка (по мере того, как она пытается пройти полную высоту страницы), а высота 100% добавляется ко всем родительским элементам, например wrapper, main, body, html. min-height 100% добавлено к основному элементу.
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
font-size: 12px;
font-family: 'Tahoma' sans-serif;
color: #1c1c1c;
}
#wrapper {
min-height: 100%;
height:100%;
}
/* Header */
header {
width:100%;
background:#454545;
}
#main {
overflow:hidden;
height:100%;
min-height:100%;
}
.nav {
background:#FF8500;
margin:0;
padding:2px;
height:100%;
min-height:100%;
}
.nav ul {
padding:2px 10px;
list-style: none;
}
.nav li {
width:100%;
height:30px;
padding: 0;
margin:5px 0;
}
.nav li a {
text-align: left;
color: #FFF;
font-size: 14px;
display: list-item;
padding: 5px;
}
.content {
width:86%;
height: 100%;
padding:10px;
margin-left:5px;
float:left;
background:#FFF;
}
.sidebar {
padding:1px;
width:12%;
background:#FF8500;
float:left;
padding-bottom: 30000px;
margin-bottom: -30000px;
}
footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
padding:10px;
background:#000;
text-align:right;
color:#FFF;
}
Будет трудно добиться того, что вертикальное пространство с использованием поплавков для ваших столбцов без javascript- здесь представляет собой чистое решение css с использованием position:absolute
вместо этого.
Вы просто пытаетесь переместить область содержимого вниз, чтобы увеличить ее? Если это так, добавьте этот стиль в #main:
мин-высота: 500 пикселей;