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>

以下是完整Html页面的链接：Example MDL Page

以下是问题的图片：Page Example

Answer 1

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

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

Answer 2

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

基本上我们在这里做的是我们已经知道我们的页脚和标题有多高（在小提琴中我只将其设置为50px）。然后我们使用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

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

    <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

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

3 个答案: