Почему этот CSS не работает в Firefox?

Question

Я потратил буквально часы, пытаясь разобраться в этом, поэтому пришло время спросить.

Я сказал, что на что-то есть height: x% (а высота в процентах) это родитель должен иметь высоту, как и его родителей и т.д.

Так вот моя структура:

html 
    body 
    div#wrapper 
     div#viewer_wrapper 
     iframe#viewer 

А вот некоторый применим CSS:

html, body{ 
    height: 100%; 
} 
#wrapper{ 
    min-height: 100%; /*it's this that seems to trip me up - a fixed height works for the problem, but not for the layout obviously*/ 
    position: relative; 
} 
#viewer_wrapper { 
    height: 100%; 
    position: relative; 
} 
#viewer { 
    width: 100%; 
    height: 96%; 
} 

Chrome очень послушный - даже без height:100% на #viewer_wrapper, у меня нет проблем. Но в Firefox и IE iframe отказывается брать 96% от высоты экрана (чего я хочу). Я даже попробовал кучи исправлений JS, все из которых приводят не только к уродливому коду, но и к плохим побочным эффектам.

Спасибо за любую помощь.

Answer 1

Мне кажется, что вы хотите разделить ваш #wrapper на две части.

Верхняя часть, содержащая все, кроме #viewer_wrapper, должна иметь свою естественную высоту. нижняя часть, содержащая #viewer_wrapper, должна иметь высоту: 100%.

HTML

<div id="wrapper"> 
    ... 
</div> 
<div id="wrapper2">  
    <div id="viewer_wrapper"> 
     ... 
    </div> 
</div> 

CSS

#wrapper2 { height:100%; } 
#wrapper, #wrapper2 { 
    width:70%; 
    position:relative; 
    padding:4px 10px; 
    margin:0 auto; 
    background:whiteSmoke; 
    border-left:2px solid black; 
    border-right:2px solid black; 
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; 
    box-sizing:border-box; 
} 

Answer 2

Да, его родителям необходимо иметь height, а не min-height.

Answer 3

Как я только понял, что именно вы хотите сделать, вы можете использовать что-то вроде этого:

<div id="viewer_wrapper"> 
    <div id="top">Something on the top</div> 
    <iframe></iframe> 
</div> 

и этот CSS:

#viewer_wrapper { 
    position: absolute; 
    z-index: 100; 
    width: 100%; 
    top: 200px; /* Some number that fits to the content on the top. */ 
    bottom: 0; 
} 

---

Для меня это работает, как с высотой 100% и высотой 96%. Но в целом лучше не использовать min-height. Вместо этого используйте height и overflow: visible;. И обратите внимание, что padding s и margin s могут быть разными, поэтому установите их в значение (возможно 0).

Также height из body является основанием для создания контента вашей страницы, например фона, видимого только над сгибом.

Answer 4

no point установка min-height до 100%, это действительно не имеет смысла.

Вместо этого можно использовать мин/макс высоты, как это:

#wrapper{ 
    min-height:50%;max-height: 100%; 
    position: relative; 
} 

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

вот скрипка с относительными значениями, http://jsfiddle.net/zB2Za/ и скрипка с исправлением http://jsfiddle.net/zB2Za/2/

Если вы хотите содержимое страницы в «заливку» вся странице, а затем установить поля и отступы для тела 0, это показано во второй скрипке.