У меня есть изменяемый размер и подвижный div с использованием JQuery UI. Я хочу, чтобы в нем была таблица, которая прокручивается вертикально. Попытка установить высоту стола на 100% в основном ничего не делает, и абсолютное позиционирование с верхним и нижним 0 тоже не работает. Я попытался поместить отдельный div в качестве контейнера, и это приблизило меня к чему-то, но оно по-прежнему не ведет себя должным образом.
Вот скрипка: http://jsfiddle.net/scottbeeson/KrP7v/1/
Вот соответствующий CSS:
table {
border-collapse: collapse;
width: 100%; height: 100%;
}
#tableContainer {
height: 100%; width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
И основной макет HTML:
<div id="window">
<div id="header">Draggable Header</div>
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
</div>
</div>
Я думаю, что это то, что вы хотите.
#window {
width: 500px;
height: 400px;
min-width: 100px;
min-height: 100px;
border-bottom: 1px solid gray;
}
#header {
height: 25px;
line-height: 25px;
background-color: gray;
color: white;
text-align: center;
}
table {
min-height: 300px;
height: 100%;
width: 100%;
border-collapse: collapse;
}
#tableContainer {
position: absolute;
top: 25px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0;
padding: 0;
overflow: auto;
}
td {
padding: 5px;
margin: 0px;
border: 1px solid gray;
}
tr:last-child td {
border-bottom: none;
}
Вот что вы можете сделать:
#window {
width: 400px;
border: 1px solid green;
overflow-x: scroll;
overflow-y: scroll;
}