Высота Div без содержания

0

Изображение 174551

Здравствуй,

Я действительно не знаю, как я могу исправить это 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/

  • 2
    Вы можете опубликовать скрипку?
  • 2
    Базовая структура HTML поможет.
Показать ещё 1 комментарий
Теги:

3 ответа

0
Лучший ответ

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; 
}
  • 0
    Это хорошее решение, но деления не текучие по вертикали
  • 0
    Что вы имеете в виду? Я считаю, что это решило проблему, которую вы задали, я не знаю, почему через два дня вы ее не принимаете. По крайней мере, дайте ему +1, если это «хорошее решение».
0

Будет трудно добиться того, что вертикальное пространство с использованием поплавков для ваших столбцов без javascript- здесь представляет собой чистое решение css с использованием position:absolute вместо этого.

http://jsfiddle.net/cKtg2/

0

Вы просто пытаетесь переместить область содержимого вниз, чтобы увеличить ее? Если это так, добавьте этот стиль в #main:

мин-высота: 500 пикселей;

  • 0
    Не рекомендуется, это не масштабируемый подход. Хотя это работает, каковы будут эффекты на экране с высотой 1000 пикселей и т. Д.
  • 0
    Вы можете использовать JavaScript, чтобы установить значение минимальной высоты после загрузки страницы.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню