1
EDIT Добавлено: http://jsfiddle.net/bfNzH/1/Вертикальная полоса прокрутки исчезает абсолютно позиционируемый элемент
My Html структурирована следующим образом:
<body>
<div class="wrapper">
<div class="left">left bar</div>
<div class="right">
<div class="topbar">topbar</div>
<div class="header">header</div>
<div class="content">
<div>..some stuff</div>
<table>
<thead>
<tr>
<th class="th1">Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
CSS
body {
height : 100%;
}
.wrapper {
position : absolute;
top : 0;
bottom : 0;
left : 0;
right : 0;
overflow : hidden;
}
.left {
height : 100%;
position : absolute;
width : 50px;
overflow : hidden;
border-right : 1px solid black;
}
.right {
position : absolute;
top : 0;
left : 50px;
bottom : 0;
right : 0;
//border : 1px solid red;
}
.topbar {
height : 20px;
display : table;
width : 100%;
border-bottom : 1px solid green;
}
.header {
height : 30px;
display : table;
width : 100%;
}
.content {
width : 100%;
height : 100%;
position : absolute;
overflow : auto;
top : 50px;
bottom : 0px;
border-top : 1px solid yellow;
border-bottom : 1px solid yellow;
}
.th1 {
width : 50%;
}
table {
width : 100%;
}
th, tr {
text-align : center;
}
Если моя таблица имеет много строк, то содержимое выходит за пределы страницы и появляется полоса прокрутки .. но это то, что происходит с полосой прокрутки:
Я понимаю, так как я абсолютно позиционирован элементы и добавил top к нему, так что вертикальная полоса прокрутки сместился на эту сумму.
Я хотел бы один из 2-х решений:
- Полоса прокрутки приходит к элементу контента
- Scrollbar приходит к телу таблицы.
можно достичь второй, добавив к display : blocktbody, но тогда винты до выравнивания очень плохо. Обратите внимание:
jsFiddle или CodePen? Пожалуйста, –
уменьшить ширину от 100% до 98%, тогда вы найдете там прокрутку. –
@ C-Link: Вы имеете в виду высоту? Но это взломать. Нужно будет сделать это через js. –