In the end I abandoned this approach, and set the height using the innerHeight of the window, minus the header and footer heights, divided by 100, then multiplied by 75 to get 75% of the center of the screen. Not the greatest approach, but it works.
Table, table-cell, percentage height and overflow scroll issue
-
03-06-2023 - |
Frage
http://www.taste-cafe.co.uk/menu/
The website above is displaying as I want it to in Chrome and Safari latest versions (possibly also IE9+, but this is untested at present); however, in Firefox 27.0.1 it is not. In Firefox it does make just the content in the middle scroll; the body scrolls.
The main section in the middle is based on a table, table cell, then wrapper with percentage height idea.
A jsFiddle of it is:
Code that works in the snippet is:
HTML
<div id="countdownBoxContainer">
<div id="countdownWrapper">
<div id="countdownBox">
<div><p>Hello world</p></div>
</div>
</div>
</div>
CSS
html,
body {
height: 100%;
overflow: hidden;
}
#countdownBoxContainer {
display: table;
height: 100%;
width: 100%;
}
#countdownWrapper {
height: 100%;
display: table-cell;
vertical-align: middle;
}
#countdownBox {
height: 75%;
background: #000;
color: #fff;
overflow-y: scroll;
}
However, when applied to the site, it does not work in Firefox.
Can anyone point me in the right direction?
Lösung
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow