Q

给人体浏览器的100％高度

2015-10-11 61 views 2 likes

2

我有这样的：给人体浏览器的100％高度

我想这样：

我已经试过这样：

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

但它没有奏效。

这里是我的代码：

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

任何解决方案？

2015-10-11 userfloflo

+1

你试过给容器'高度：100％' - https://jsfiddle.net/61eguhw4/ –

+1

''在你的HTML中没有任何地方......可能是复制粘贴错误。你的问题是有道理的。你要求的身高是100％！ –

+1

请参阅CSS：https://jsfiddle.net/zbjaaxe6/18/ –

A

回答

2

“与大众/ VH，我们可以调整大小的元素相对于视口的大小而言，vw/vh单位是有趣的，因为1单位反映的是视口的宽度的1/100，要使视图的宽度为整个元素的1/100，例如，你将它设置为宽度：100vw。“

- 乔纳森·斯努克，浆纱随着CSS3的大众和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>

2015-10-11 17:38:43

1

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

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

或者，你可以使用视窗百分比，如果你是冷静与支持IE9 +：

.content { 
    height: 100vh; 
}

的风格应该是内容部分，而不是html/body。

编辑：fiddle

2015-10-11 17:26:56 Clark

+1

我希望标题+内容+页脚100％的页面不仅仅是内容部分。我不想滚动条。 – userfloflo

+0

查看@Michael P. Bazos的回答如下 - 如果您不需要传统浏览器支持，flexbox将是一个很好的解决方案。 – Clark

1

我不知道如果这就是你想要什么，但看看： https://jsfiddle.net/zbjaaxe6/23/

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

2015-10-11 17:32:25

+0

我希望标题+内容+页脚占据页面的100％，而不仅仅是内容部分。我不想滚动条。 – userfloflo

4

这个问题是一个很好的候选为flex箱：

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

2015-10-11 17:43:45

1

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

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

您可以看到here的解决方案。

2015-10-11 17:47:00 marisaroque

相关问题