如何在内容

Question

我正在尝试基于jQuery标签构建响应式网络。我希望此网页完全全屏（100％高度和宽度），div.ui-tabs-nav具有固定高度，并且如果不是div.ui-tabs-panel，则可以滚动<div id="queue_tabs"> <ul> <li><a href="queue_list.php?show=active">Active</a></li> <li><a href="#tabs-completed">Completed</a></li> </ul> <div id="tabs-active">...</div> <!-- This will be automatically generated by jQuery. --> <div id="tabs-completed">...</div> </div> 的内容＃39;适合当前窗口。

这是我布局的基本结构：

#queue_tabs {
    height: 100%;
    width: 100%;
}

#queue_tabs .ui-tabs-panel {
    height: 90%; /* <--- This is what I don't want. */
    overflow: auto;
}

请注意，虽然内容将通过AJAX加载加载，但我还没有将其包含在以下jsFiddle中。

在我设置的CSS文件中：

div.ui-tabs-panel

正如您所看到的，为了展开div我必须将高度设置为相对于窗口高度（90％）的特定值，从而导致PHP被完美调整< em>仅在某种情况下。

有没有办法垂直覆盖所有区域并仍然允许出现溢出？

Answer 1

我认为你错过了以下部分：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

尝试添加此内容。你需要确保没有任何东西增加你的身体/ html的宽度，否则你将面对一个水平滚动条。