Firefox игнорируя высота: 100%

Question

У меня есть следующий фрагмент кода, который работает в хроме и исследователя, однако я не могу показаться, чтобы получить Firefox, чтобы сделать левый бар .leftpanel растянуть на всю высоту родителя .viewer

JSfiddle

Отрывок

html, 
 
body { 
 
    border: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
} 
 
.fullscreen { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background-color: pink; 
 
    display: table; 
 
    z-index: 1; 
 
} 
 
.centeralign { 
 
    vertical-align: middle; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: table-cell; 
 
    background-color: blue; 
 
    text-align: center; 
 
    padding: 2em; 
 
} 
 
.viewer { 
 
    text-align: left; 
 
    display: inline-block; 
 
    width: 90%; 
 
    height: 90%; 
 
    position: relative; 
 
    background-color: green; 
 
    padding: 1em; 
 
    min-height: 35.45em; 
 
} 
 
.leftpanel { 
 
    width: 15em; 
 
    /*Alter depending on how much space this takes*/ 
 
    float: left; 
 
    height: 100%; 
 
    position: relative; 
 
    background-color: yellow; 
 
} 
 
.leftpanel .slide { 
 
    width: 15em; 
 
    height: 9.706em; 
 
    display: block; 
 
    margin-bottom: 1em; 
 
    background-color: red; 
 
} 
 
.leftpanel .comments_container { 
 
    display: table; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 14em; 
 
    width: 15em; 
 
    background-color: orange; 
 
}

<ul class="fullscreen"> 
 
    <li class="centeralign"> 
 
    <ul class="viewer"> 
 
     <li class="leftpanel"> 
 
     <ul class="slide"> 
 
      <li class="slide_image"> 
 
      </li> 
 
      <li class="slide_menu"> 
 
      </li> 
 
     </ul> 
 
     <ul class="slide"> 
 
      <li class="slide_image"> 
 
      </li> 
 
      <li class="slide_menu"> 
 
      </li> 
 
     </ul> 
 
     <ul class="comments_container"> 
 
      <li class="comments"> 
 
      <span class="comment">Test</span> 
 
      </li> 
 
      <li class="new_comment"> 
 
      <form action="new_comment.php"> 
 
       <input type="text" name="comment" /> 
 
       <input type="submit" name="Send" /> 
 
      </form> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="viewport"> 
 
     </li> 
 
     <li class="close"> 
 
     X 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

Хотя ваш вопрос уже был дан ответ, вот это 'общее' решение:

.clearfix:before,

.clearfix:after { content: ''; display: table }

.clearfix:after { clear: both }

Ваш класс viewer нуждается в хорошо известном «clearfix», добавленном в HTML, выполните поиск Google для правильного объяснения. Измените своего зрителя HTML <ul class="viewer clearfix"> и добавьте класс в ваш глобальный CSS (для общего использования), и вам хорошо идти.

Answer 2

К сожалению, я не могу сказать вам, почему firefox делает это или что вызывает это, однако я могу дать вам возможное решение этой проблемы, которая не включает в себя значительную часть изменений в вашем коде.

Решение простое, используйте display:flexвместоdisplay:inline-block на вашем .viewer элемента и дать детям, в этом случае .leftpanel элемент свойство align-items:stretch

Чтобы прочитать подробнее об этом проверить либо this css-tricks guide или this MDN guide.

Ваш обновленный код будет выглядеть следующим образом:

HTML: Ничего не изменилось.

CSS:

.viewer { 
    text-align: left; 
    display: flex; /* changed the display to flex */ 
    width: 90%; 
    height: 90%; 
    position: relative; 
    background-color: green; 
    padding: 1em; 
    min-height: 35.45em; 
} 

.leftpanel { 
    width: 15em; /*Alter depending on how much space this takes*/ 
    float: left; 
    height: 100%; 
    position: relative; 
    background-color: yellow; 
    align-items: stretch; /* Added the align-items property */ 
} 

JSFiddle

Надеется, что это помогает!

Answer 3

На первый взгляд, ваш вопрос вы устанавливаете большой min-height к вашему родителю .viewer, так что просто удалить его, потому что вы уже установили height, как 90% в другого родителя.

html, 
 
body { 
 
    border: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
} 
 
.fullscreen { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background-color: pink; 
 
    display: table; 
 
    z-index: 1; 
 
} 
 
.centeralign { 
 
    vertical-align: middle; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: table-cell; 
 
    background-color: blue; 
 
    text-align: center; 
 
    padding: 2em; 
 
} 
 
.viewer { 
 
    text-align: left; 
 
    display: inline-block; 
 
    width: 90%; 
 
    height: 90%; 
 
    position: relative; 
 
    background-color: green; 
 
    padding: 1em; 
 
    /* min-height: 35.45em; remove this line */ 
 
} 
 
.leftpanel { 
 
    width: 15em; 
 
    /*Alter depending on how much space this takes*/ 
 
    float: left; 
 
    height: 100%; 
 
    position: relative; 
 
    background-color: yellow; 
 
} 
 
.leftpanel .slide { 
 
    width: 15em; 
 
    height: 9.706em; 
 
    display: block; 
 
    margin-bottom: 1em; 
 
    background-color: red; 
 
} 
 
.leftpanel .comments_container { 
 
    display: table; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 14em; 
 
    width: 15em; 
 
    background-color: orange; 
 
}

<ul class="fullscreen"> 
 
    <li class="centeralign"> 
 
    <ul class="viewer"> 
 
     <li class="leftpanel"> 
 
     <ul class="slide"> 
 
      <li class="slide_image"> 
 
      </li> 
 
      <li class="slide_menu"> 
 
      </li> 
 
     </ul> 
 
     <ul class="slide"> 
 
      <li class="slide_image"> 
 
      </li> 
 
      <li class="slide_menu"> 
 
      </li> 
 
     </ul> 
 
     <ul class="comments_container"> 
 
      <li class="comments"> 
 
      <span class="comment">Test</span> 
 
      </li> 
 
      <li class="new_comment"> 
 
      <form action="new_comment.php"> 
 
       <input type="text" name="comment" /> 
 
       <input type="submit" name="Send" /> 
 
      </form> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="viewport"> 
 
     </li> 
 
     <li class="close"> 
 
     X 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>