如何使网格跨越页面的剩余高度

Question

我只是想使用 Material 响应屏幕大小的 Design Light 创建一个基本网站，但我无法让网格填充所有可用高度。我试图在网上寻找解决此问题的方法，但找不到任何有效的方法。

这是我将使用的网格之一的源代码：

<main class="mdl-layout__content"> 
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
        <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
        <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>        
    </div> 
</main>

这里是 link 完整的 Html 页面：Example MDL Page

这是问题的图片：Page Example

Answer 1

尝试使用 CSS 高度属性。像这样：

    <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>
    <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>
    <div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>

这里有更多信息：http://www.w3schools.com/cssref/pr_dim_height.asp

Answer 2

我假设您的页面高度是视图高度，您只能使用现代浏览器。 See view height

基本上我们在这里所做的是我们已经知道页脚和页眉的高度（在 fiddle 中我只是将它们分别设置为 50 像素）。然后我们使用 calc CSS 属性将 view height (vh) 设置为 100% - 100px（意思是页脚和页眉的高度加在一起（50+50 = 100）

Check the fiddle

<div id="main-body">
    <div class="header"></div>
    <div class="content clearfix">
        <div class="a">1</div>
        <div class="a">2</div>
        <div class="a">3</div>
        <div class="a">4</div>
    </div>
    <div class="footer"></div>
</div>

* {
    box-sizing: border-box;  /* add for browser prefixes */
}

#main-body {
    height: 100%;
    overflow: hidden;
}
.header, .footer {
    background-color: blue;
    height: 50px;
}
.content .a {
    height: calc(100vh - 100px);
    background-color: red;
    width: 25%;
    float: left;
}

.clearfix:after {
    content: "";
    clear:both;
    display:table;
}

请注意，您还需要 <head> 中的视口元标记才能正常工作。

<meta name="viewport" content="width=device-width, initial-scale=1">

OP 添加了他希望能够在这些内容 div 中将文本居中的功能

<div id="main-body">
    <div class="header"></div>
    <div class="content clearfix">
        <div class="a"><p>1</p></div>
        <div class="a"><p>2</p></div>
        <div class="a"><p>3</p></div>
        <div class="a"><p>4</p></div>
    </div>
    <div class="footer"></div>
</div>
#main-body {
    height: 100%;
    overflow: hidden;
}
.header, .footer {
    background-color: blue;
    height: 50px;
}
.content .a {
    height: calc(100vh - 100px);
    background-color: red;
    width: 25%;
    float: left;
    position: relative;
}

.content .a p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.clearfix:after {
    content: "";
    clear:both;
    display:table;
}

Answer 3

我这样做的方法是覆盖几个 mdl 样式，特别是使 main 显示为 flex 而不是 inline-block。添加一个 Id 以限制此覆盖对您网站其余部分的影响可能是有意义的

.mdl-layout__content {
    display: flex;
    flex-direction: column;
    .mdl-grid {
        width: 100%;
        flex-grow: 2;
    }
}

如何使网格跨越页面的剩余高度

How to make a grid span the remaining height of the page

html

css

material-design-lite