css - 展开网格 100% 其父 div,没有其他卷轴

标签 css layout kendo-ui kendo-ui-grid

你能帮我修复这个布局吗:http://imgur.com/a/kTMao

我希望网格将完全(水平和垂直)填充其父 div,而不显示最外层的滚动条(窗口滚动条) 我唯一想看到的滚动条是网格的滚动条

页面中间有一个kendoSplitter

这是我的标记

<body>
    <img src="images/logo.png" />
    <h1>Archivio documentale</h1>
     <div id="horizontal" style="height: 100%; width: 100%">
            <div id="left-pane">
                <div class="pane-content" style="width:390px;">
                    <!-- LEFT SIDE CONTENT initial fixed width -->
                </div>
            </div>
            <div id="main-pane">
                <div class="pane-content">
                     <div id="mainGrid"></div>
                </div>
            </div>
      </div>
</body>

最佳答案

您可以使用Viewports。有 vh( View 高度)和 vw( View 宽度)。 vh动态取窗口的高度,vw也动态取窗口的宽度。

因此,通过应用以下内容:

div{
    height: 100vh;
    width: 100vw;
}

无论如何,您的网格总是 100% 适合。

示例:http://codepen.io/diego-fortes/pen/oYKpqK

希望对你有帮助:)

关于css - 展开网格 100% 其父 div,没有其他卷轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41382604/

相关文章:

css - 可以在 Kendo Tabstrip 元素后添加管道分隔符吗?

javascript - 将 FormPanel 放入 RowExpander 中?

javascript - 一次选择一个单选按钮

下方和上方的 Android 布局

android - 在按钮上结合背景图像和背景可绘制样式

linux - 帮助网站在 FF/Linux 上的布局

css - 创建简单的 CSS 多级菜单

html - 三个重叠的 <span>

javascript - Kendo Ui 下拉列表集通过 Javascript 可见

javascript - 单击网格中的单元格时如何获取单元格的列标题和行的第一个 td?