Question

我有这个：

我想要这个：

我试过这个：

html, body
{
    height: 100%; //and this -> 100vh
}

但它不起作用。

这是我的代码：

https://jsfiddle.net/zbjaaxe6/9/

任何解决方案？

Answer 1

此问题适用于 flexbox ：

<强> CSS

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;   // set min-height instead of height, otherwise body won't
                         // grow with content, if content is bigger than viewport
}

header {
    height: 50px;  // adjust to what you want
}

main {
    flex: 1;       // This will make the 'main' block to expand !
}

footer {
    height: 30px;  // adjust to what you want
}

<强> HTML

<body>
    <header>HEADER</header>
    <main>MAIN</main>
    <footer>FOOTER</footer>
</body>

<强>结果：

的 Fiddle

Flexbox是IE10 +解决方案。 Browser support in detail

Answer 2

“使用vw / vh，我们可以将元素大小相对于大小视。 vw / vh单位是有趣的，因为1个单位反映了1/100> 1。视口的宽度。使元素的全宽例如，您将视图设置为宽度：100vw。“

- Jonathan Snook，使用CSS3的VW和VH单位调整大小

CSS：

[class*="col"] {
    border: 1px solid black;
}

#menu{
    display:none;
    margin-top:20px;
    position:absolute;
    background: #fff;
    z-index: 1;
}

body {
   font: caption;

}

#content{
    min-height: 90vh;     
}

#footer{
    min-height: 5vh;     
}

#header{
    min-height: 5vh;     
}

HTML：

<div class="container">
    <div class="row">
            <!-- Small devices >= 768px Collapsed to start, horizontal above breakpoints -->
            <div id = "header" class="col-xs-10"><span id="btnMenu" class="glyphicon glyphicon-menu-hamburger" aria-hidden="true">TITLE</div>
            <div id="menu" class="col-xs-3 menu">
                MENU
            </div>
            <div id="content" class="col-xs-10 content">
               </span>CONTENT
            </div>
            <div class="col-xs-10" id = "footer">FOOTER</div>
    </div>
</div>

Answer 3

不理想，但你可以使用绝对定位：

.content {
  position: absolute;
  top: 20px;
  bottom: 0;
}

或者，如果您支持ie9 +：

，那么您可以使用视口百分比

.content {
  height: 100vh;
}

样式应该在内容部分，而不是html / body。

编辑：fiddle

Answer 4

我不知道这是不是你想要的，但看一看： https://jsfiddle.net/zbjaaxe6/23/

.content{
position: relative;
margin: 0;
min-height: 100vh;
}

Answer 5

我使用flexbox属性解决了您的问题。

.container, 
.row {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#title, 
#footer {
    flex: none;
}
#content {
    flex: 1 0 auto;
}

您可以看到here解决方案。

为身体提供100％的浏览器身高

5 个答案: