Scrolling Cell in a 100% height TABLE
I'm sorry if this was already answered, but it's kind of difficult to search for something with "100% height".
My problem is that I need 100% height table layout because of automatic cell resizing done by browser, which I don't want to script myself for obvious reasons.
It differs from other "100% problems", in that I need some cells to stick on the top and some on the bottom, and have the middle resized by browser to fill remaining space.
That sort of works, the problem happens when I need that middle part to contain overflowing stuff, and obviously I want overflow:auto there to enable user thru that stuff. It works in WebKit, in Firefox, it doesn't, others not tested. Here's the test case.
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
}
table {
height: 100%;
width: 200px;
border: 0;
}
.fill {
background-color: red;
}
.cont {
overflow: auto;
height: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td style="height:50px"></td>
</tr>
<tr>
<td style="height:100px"></td>
</tr>
<tr>
<td class="fill">
<div class="cont">
An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected
</div>
</td>
</tr>
<tr>
<td style="height:100px"></td>
</tr>
</table>
</body>
1 ответ
Я не уверен, что понимаю, почему вам нужно использовать стол. Если ваша цель - просто создать макет, который всегда охватывает всю высоту окна браузера, когда содержимое в середине мало и регулируется вертикально, когда содержимое увеличивается, то CSS - это все, что вам нужно.
<html>
<head>
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
height:100%; /* Necessary for IE
position:relative;
background-color: red; /* Set equal to background-color of #body. This creates the illusion that your middle content spans the entire height of the page */
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
background-color: red; /* Set equal to background-color of #container */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
</head>
<body>
<div id ="container">
<div id="header"></div>
<div id="body">
This is resizable.
</div>
<div id="footer"></div>
</div>
</body>
</html>
Обратитесь к этому руководству для того, как это сделать (все, что я сделал, было редактировать цвета фона контейнера и вещества, чтобы создать иллюзию, что средний контент провел высоту 100%. Отрегулируйте ширину CSS и т. Д. .. чтобы соответствовать вашу макет).