Div внутри div (высота 100%) и нижний колонтитул внизу - JSFiddle

Я создал нижеследующий jsfiddle, воссоздающий мою проблему, хочу, чтобы панель .dashboard & .inner-панель всегда имела высоту 100% и сохраняла нижний колонтитул всегда внизу.Div внутри div (высота 100%) и нижний колонтитул внизу - JSFiddle

http://jsfiddle.net/rv7xN/1/

HTML

<div id="wrap"> 
    <body> 
     <div class="dashboard"> 
      <div class="inner-dashboard"> 

      </div> 
     </div> 
    </body> 
</div> 
<div id="footer"></div>

CSS

html,body{ 
    height:100%; 
} 
#wrap { 
    min-height: 100%; 
    height: auto; 
    margin: 0 auto -60px; 
    padding: 0 0 60px; 
} 
#footer { 
    height: 60px; 
    background-color: blue; 
} 
.dashboard{ 
    width: 100%; 
    height: auto; 
    min-height: 100%; 
    position: absolute; 
    padding-bottom: -60px; 
    background-color:green; 
} 
.inner-dashboard{ 
    height:100%; 
    padding-bottom: -60px; 
    background-color:red; 
}

источник

2014-01-26 darkcode

Вот пример: jsFiddle

мне пришлось модифицировать HTML, чтобы иметь общий контейнер для приборной панели и нижний колонтитулы.

<div id="wrap"> 

     <div class="dashboard"> 
      <div class="inner-dashboard"> 

      </div> 
     </div> 
    <div id="footer"></div> 
</div>

Я превратить wrapper (общий контейнер) в виде таблицы и другие элементы таблицы-клетки. Так что, даже если ваша приборная панель высотой 200%, нижний колонтитул все еще внизу.

html,body{ 
    height:100%; 
} 
#wrap { 
position:absolute; 
display:table; 
height:100%; 
width:95%; 
padding-bottom:60px; 
} 

.dashboard{ 
    width: 95%; 
    height: 200%; 
    display:table; 
    border:5px solid green; 
} 
.inner-dashboard{ 
width: 95%; 
    height: 100%; 
    display:table-cell; 
    border:5px solid red; 
} 
#footer {  
    display:table; 
    height: 60px; 
    width:95%; 
    border:5px solid blue; 
    bottom:-10px; 
}

Это что?!

источник

2014-01-26 17:08:08 audre7

Я добавил модифицирована ваш CSS и добавил position атрибут

Я надеюсь, что пересмотр решает проблему: [UPDATE] http://jsfiddle.net/saurabhsharma/rv7xN/3/

источник

2014-01-26 12:42:26

. -интерфейсная панель также должна быть на 100%. Также с вашим решением нижний колонтитул нет в нижней части страницы. – darkcode

Я обновил версию выше, а нижний колонтитул находится на абсолютном дне, его несколько выше в jsfiddle, но в действительности он появится в абсолютном дне. Если вы найдете его ценным, пожалуйста, примите ответ. –

, если положение нижнего колонтитула является абсолютным, когда приборная панель выросла более чем на 100%, а нижний колонтитул - нет в конце страницы. – darkcode

Div внутри div (высота 100%) и нижний колонтитул внизу - JSFiddle

ответ

Смежные вопросы