100% не работает

Question

100% не работает

0

У меня проблема с возрастной проблемой 100% высоты. Я знаю, что эту проблему много задают, и я рассмотрел это, это, это и бесчисленное множество. Я хочу создать базовый фиксированный заголовок, боковую навигацию и главную область статьи, которая выглядит так:

Но по какой-то причине он выглядит следующим образом (я положил 200px padding в синем баре, чтобы он появился).

Мой HTML выглядит следующим образом:

<!DOCTYPE html>
<html>
<head></head> 
<body>

<header></header>

<section>

<nav></nav>

<article></article>

</section>

</body>
</html>

И мой CSS выглядит так:

* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }

body, html { height: 100%; } 

header {
  background: #6c6363;
  top: 0;
  z-index: 100;
  height: 100px;
  left: 0;
  position: fixed;
  right: 0;
}

section {
  min-height: 100%;
  overflow: auto;
  position: relative;
  padding-top: 100px;
}

nav {
  background-color: #747feb;
  float: left;
  min-height: 100%;
  padding-bottom: 200px;
  width: 150px;
}

article {
  background: #74eb8a;
  margin: 20px 20px 20px 170px;
  min-height: 100%;
  padding: 20px;
  position: relative;
}

Как вы можете видеть, ничего особенного. Я знаю, что section нуждается в 100% -ной высоте, а также body и html. Я могу полностью позиционировать nav и acticle и сделать что-то вроде этого:

Но на моем фактическом сайте (я упростил это для этого) боковая навигация имеет выпадающие списки, которые будут динамически изменять высоту навигации. Это приводит к следующему:

Абсолютно позиционированные элементы не изменят высоту относительной обертки, поэтому мне нужно их плавать. Тем не менее, плавание их не делает высоту 100%.

Я даже сделал JSFiddle, чтобы показать проблему: http://jsfiddle.net/g8VjP/

Если кто-нибудь может мне помочь, я буду очень благодарен.

Спасибо!

PS: Я использую calc(), если он работает!

РЕШЕНИЕ

Я изменил ответ Майанка и сумел придумать решение. Мне пришлось добавить пару оберток, но это сработало. Теперь мой HTML выглядит так:

<!DOCTYPE html>
<html>
    <head></head> 
<body>

<header></header>

<section>

<nav></nav>

<div class="cell-wrap">
    <div class="table-wrap">
        <article></article>
    </div>
</div>

</section>

</body>

</html>

С ключом является cell-wrap и table-wrap. У меня nav - это одна таблица-ячейка, а .cell-wrap - другая. Когда nav имеет фиксированную связь, .cell-wrap заполняет остальные. Тем не менее, я хочу, чтобы расстояние вокруг article, поэтому я добавил. .table-cell и сделал это в таблицу. Затем он расширяет и заполняет высоту и ширину .cell-wrap. Затем я добавляю 30px padding, чтобы дать пространство вокруг article (поскольку поля не работают на table-cells) и сделал article ячейкой таблицы.

Немного запутанный, но он работает!

Мой CSS выглядит следующим образом:

* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }

body, html { height: 100%; } 

header {
  background: #6c6363;
  top: 0;
  z-index: 100;
  height: 100px;
  left: 0;
  position: fixed;
  right: 0;
}

section {
  display: table;
  height: 100%;
  min-height: 100%;
  padding-top: 100px;
  position: relative;
  width: 100%;
}

nav {
  background-color: #657182;
  display: table-cell;
  min-height: 100%;
  width: 150px;
}

.cell-wrap {
  display: table-cell;
  height: 100%;
  min-height: 100%;
}

.table-wrap {
  display: table;
  height: 100%;
  padding: 30px;
  width: 100%;
}

article {
  background: none repeat scroll 0 0 #FFFFFF;
  display: table-cell;
  min-height: 100%;
  padding: 20px 20px 120px;
  z-index: 1;
}

Здесь скрипка. Не уверен, почему в ней есть полоса прокрутки внизу, но, кажется, это нормально, если вы просто показываете ее в своем браузере.

Kenton de Jong 13 дек. 2013, в 08:48

Источник

0

Вот пример . caniuse calc ()
Vucko 13 дек. 2013, в 07:17

Теги:

html

css

css3

3 ответа

3

height: 100% означает 100% от height блока. Ваш блок, section, не имеет определенной height (но вместо этого min-height). Вы также можете:

Изменить min-height: 100% от section к height: 100%. или...
Держите min-height: 100% и добавьте height: 1px (или что-нибудь менее 100%), которое будет переопределено min-height.

Ключ здесь - иметь свойство height заданное родительским.

myajouri 13 дек. 2013, в 05:45

0

попробуй это:

nav {
  background-color: #747feb;
  width: 150px;
  position : absolute;
  top : 100px;
  left : 0;
  bottom : 0;
}

 article {
  background: #74eb8a;
  position: absolute;
  top : 100px;
  left : 150px ; /* nav width*/
  bottom : 0;
  right : 0;
 }

elasmai elmehdi 13 дек. 2013, в 06:27

Ещё вопросы

NoobEditor · Accepted Answer · 2013-12-13T05-57-00.000Z

display:table and display:tabel-cell, вы друзья здесь, друг!
Обновил вашу скрипку до небольших обходных решений, и вот вы: DEMO

CSS для изменения:

section {
    min-height: 100%;
    overflow: auto;
    position: relative;
    padding-top: 100px;
    display:table;/* addition */
}
article {
    background: #74eb8a;
    margin: 0px 20px 0px 170px;
    min-height: 100%;
    width:100%;
    height: 100%;
    position: relative;
    display:table-cell; /* addition */
 }

Кроме того, я взял на себя смелость удалить дополнительное padding которое вы разместили внутри article, вставить div или section внутри article и назначить для него дополнение, если оно работает!

Это не сработало для меня, но привело меня в правильном направлении, чтобы решить мою проблему. Я бы никогда не подумал об использовании таблиц и табличных ячеек. Мне это кажется таким хакерским! Но это сработало! Смотрите вопрос для решения. Еще раз спасибо!
добро пожаловать ... нет проблем !! :)