Я строю макет, который имеет динамическую высоту (как это делают большинство людей). Я искал какое-то время, но не нашел подобного случая с моим. так вот, мой упрощенный код:
HTML:
<div id="body"><div id="content">
content
</div>
</div>
<div id="footer">
abc
</div>
CSS
#footer{
position: absolute;
bottom: 0;
width: 100%;
background: #ddd;
}
#body{
padding: 60px 50px 70px 50px;
position: relative;
min-height: calc(100% - 130px);
}
#content{
font-family: verdana;
margin-left: 200px;
border-left: 5px solid #ddd;
padding: 0 0 0 10px;
min-height: 100%;
min-width: 500px;
}
body{
margin:0;
overflow-y:scroll;
height:100%;
position:relative;
}
html{
height:100%;
}
проблема заключается в том, когда я использую этот код, высота содержимого вычисляется неправильно, и результат выглядит как эта скрипка, в то время как я пытаясь сделать это, когда контент короток, он должен выглядеть как this, а когда контент длинный, он должен выглядеть как this.
если я изменяю min-height на height, когда содержимое короткое, я получаю то, что я хотел, но когда контент длинный, я получаю этот раздражающий макет
Кажется, что calc не может прочитать атрибут height, если он не указан (используя min-height), но если указан height, то я не могу получить динамическую высоту, есть ли какое-либо другое решение для достижения это?
PS:
то, что я пытаюсь сделать, это сделать границу #content растягивается в соответствии с ее содержанием с минимальной высотой высоты страницы
примечание
Еще один странный факт: на самом деле мой текущий код работает с последними версиями хром и IE, но есть проблема с последними версиями firefox и opera. Я пытался воспроизвести проблему с помощью jsfiddle, и, к моему благоговению, у всех браузеров такая же проблема, я включил все связанные html и css (скопировали сгенерированные html и css) в jsfiddle только для того, чтобы найти, что мой код не работает вообще, я очень смущен