Jak zrobić warstwę, która będzie miała wysokość 100%, gdy tekstu w niej będzie mało, a kiedy tekstu będzie więcej niż wysokość to warstwa zwiększy swoje rozmiary dostosowując się do wysokości tekstu (jak w IE) a nie tak, że tekst wyjedzie za nią, zostanie ucięty lub pojawią się paski przewijania?
Jak na razie wymyśliłem sposób w JS, ale to chyba nie jest dobre opierać layout na skrypcie?
Kod
<script>
function winHeight() {
if (typeof window.innerHeight == 'number') return innerHeight;
return document.getElementsByTagName('html')[0].offsetHeight;
}
onload = onresize = function() {
var box = document.getElementById('box');
var tmp = winHeight() - box.offsetTop;
if (tmp < 0) tmp = 0;
box.style.height = tmp + 'px';
}
</script>
<style>
html, body { background: green; }
body { text-align: center; margin: 0px; padding: 0px; border: 0px; }
#content { background: yellow; width: 600px; margin: 0px auto; }
</style>
<div id="content">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text
<div id="box"></div>
</div>
function winHeight() {
if (typeof window.innerHeight == 'number') return innerHeight;
return document.getElementsByTagName('html')[0].offsetHeight;
}
onload = onresize = function() {
var box = document.getElementById('box');
var tmp = winHeight() - box.offsetTop;
if (tmp < 0) tmp = 0;
box.style.height = tmp + 'px';
}
</script>
<style>
html, body { background: green; }
body { text-align: center; margin: 0px; padding: 0px; border: 0px; }
#content { background: yellow; width: 600px; margin: 0px auto; }
</style>
<div id="content">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text
<div id="box"></div>
</div>
? bo IE tego nie obsluguje, teraz tylko dodam _height: 100% dla niego i bedzie tak jak chce... thx...
