100% высоты и странные вопросы

, поэтому я просмотрел следующие последние вопросы и я до сих пор не могу понять, почему это происходит:100% высоты и странные вопросы

XHTML HTML element with 100% height causing scrollbars

Body height 100% displaying vertical scrollbar

вот мой jsfiddle : http://jsfiddle.net/G4kgW/5/

CSS

body { 
    background-color:#ccc; 
    height:100%; 
    overflow:hidden; 
} 

div { 
    display:block; 
    position:relative; 
} 

html { 
    background-color:#f00; 
    height:100%; 
    overflow:hidden; 
} 

.uslt-wrapper { 
    height:100%; 
    overflow:auto; 
    width:100%; 
} 
.uslt-content { 
    background-color:#00f; 
    height:100%; 
    margin:0px auto; 
    width:90%; 
} 

.uslt-footer, .uslt-header { 
    background-color:#24427c; 
    height:68px; 
    width:100%; 
} 

.uslt-logo { 
    color:#fff; 
    height:68px; 
    margin:0px auto; 
    width:230px; 
}

HTML

<div class="uslt-wrapper"> 
    <div class="uslt-header"> 
     <div class="uslt-logo"> 
      <h1>Logo</h1> 
     </div> 
    </div> 
    <div class="uslt-content"> 
    </div> 
    <div class="uslt-footer"> 
     <div class="uslt-logo"> 
      <h2>Logo</h2> 
     </div> 
    </div> 
</div>

я пытаюсь достичь (без HTML5/CSS3) что-то где, если окно слишком велик для страницы, средняя область будет расширяться, чтобы занять дополнительное пространство.

но я столкнулся с проблемой, где независимо от размера окна, я получаю полосы прокрутки, даже если в настоящее время нет содержимого, просто стилизация CSS. (обратите внимание, что ссылка jsfiddle имеет сброс CSS)

источник

2013-06-28 Chris

Вы имеете: uslt-контент (100% высоты) + заголовок (не нулевой высоты) + footer (также ненулевая высота)> 100% – mishik

Это может помочь: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page/ – Alp

i удалена высота и переполнение из uslt- содержимое, но теперь столбцы не распространяются на дно. – Chris

Ваш класс, uslt-content, наследует 100% высоты элемента <HTML>, который имеет высоту видового экрана. Таким образом, .uslt-wrapper переполняется.

Одно из возможных решений - пусть заголовок и нижний колонтитул перекрытия над содержанием (jsFiddle Demo):

.uslt-content { 
    background-color:#00f; 
    height:100%; 
    margin: -68px auto; 
    width:90%; 
} 

.uslt-footer, .uslt-header { 
    background-color:#24427c; 
    height:68px; 
    width:100%; 
    position: relative; 
    z-index: 1; 
}

источник

2013-06-28 20:18:05

Проблема заключалась в том, что .uslt-content + .uslt-footer + .uslt-header имел высоту 100% + 136 пикселей. Маржа компенсирует это, но если вы добавите контент, первые 68 пикселей будут отображаться под заголовком (и последние 68 под нижним колонтитулом). Если вы добавите дополнение для борьбы с этим, общая высота будет больше 100%, поэтому, чтобы правильно это сделать, вам нужно добавить элемент внутри .ustl-content и добавить css для этого элемента. Margin: 68px 0; '. См. [This jsfiddle] (http://jsfiddle.net/Sumurai8/QEVxC/). Можете ли вы добавить это к ответу? – Sumurai8

потрясающий! это работает, но единственное, если uslt-innercontent слишком велико, находится под нижним колонтитулом. – Chris

Вам нужно установить 'min-height: 100%' вместо 'height: 100%'. Это позволит коробке расти, если слишком много контента – Sumurai8

100% высоты и странные вопросы

ответ

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