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

我只是试图创建一个基本的网站使用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

来源

2015-11-02 Eidolon

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

基本上我们在这里做的是我们已经知道我们的页脚和页眉会有多高（在小提琴中我只是将它设置为每个50px）。然后我们使用calc CSS属性设置view height (vh)至100％ - 100像素（意为页脚和页眉的身高放在一起（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; 
}

请注意，您还可以需要视meta标签在你<head>为此工作。

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

OP加ED的他想市中心的这些内容的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; 
}

来源

2015-11-02 19:24:57

Yay工作！非常感谢。 – Eidolon

我能再问你一个又快又愚蠢的问题吗？ – Eidolon

有没有简单的方法可以使文本垂直居中？（不使用jquery） – Eidolon

-2

试着用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

来源

2015-11-02 19:24:08 Fearium

我已经试过了，它不会做一些什么原因的影响。 – Eidolon

你应该提供问题的答案和实际例子。 'height：100％'只有在父容器上设置高度时才有效。 –

钍方式，我做的是为忽略一对夫妇的MDL的风格，特别是使main显示为flex而非inline-block的能力。或许，这将是有意义的添加ID来限制这种覆盖跨其余网站

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

来源

2016-08-22 08:58:40

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

回答

相关问题