Bootstrap和min-height问题 [英] Bootstrap and min-height issues
问题描述
所以我有一个基于Bootstrap的网站，背景色很暗。标题（导航栏）和页脚是白色的。我在div上设置了一个名为BackLight的内容：
Hi,
So I have a Bootstrap based website with some pretty dark background colours. The header (navbar) and footer are white. The content I set on a div with a class called BackLight:
.BackLight {
background-color: #ffffff; /*! fallback */
background-color: rgba(255, 255, 255, .7);
box-shadow: 0px 0px 10px 0px #323232; /*! fallback */
box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
min-height: 100% !important ;
position: relative;
z-index: 20;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
看起来相当不错（谢天谢地！我不擅长设计：S）
我遇到的问题是 min-height：100％！important; 什么都不做。
我添加了！important ，但仍然没有。我看了一下容器，它就是：
This looks pretty good (thankfully! I'm no good at design :S)
The issue I have is that min-height: 100% !important ; does nothing.
I added the !important and still nothing. I took a look at the containers and it goes:
<html>
<body>
<form runat="server">
<div class="col-sm-12 col-md-12 col-lg-8 BackLight">
我查了一下表格。身高是0px。我认为这不重要，但我将高度设置为1000px，仍然没有快乐。设置 min-height：1000px 有效，但无论浏览器大小如何，我都需要适合页面的大小：S
我检查了样式，在任何容器中找不到任何涉及高度的东西。
任何我错误的想法？
谢谢^ _ ^
Andy
I checked the form. Height was 0px. I don't think it matters but i set the height to 1000px and still no joy. Setting the min-height:1000px works, but I need the size to fit the page whatever the browser size :S
I checked the styles and couldn't find anything referring to height in any of the containers.
Any ideas where I am goin wrong?
Thanks ^_^
Andy
推荐答案
问题是min-height：100％表示 100％父元素的高度。要占据窗口的整个高度，表单，正文和html元素也必须占据窗口的整个高度。
如果你可以放弃对 IE8及更早版本 [ ^ ]，最简单的选择是使用新vh单位 [ ^ ]：
The problem is thatmin-height:100%means 100% of the parent element's height. To take up the full height of the window, theform,bodyandhtmlelements must also take up the full height of the window.
If you can drop support for IE8 and earlier[^], the simplest option is to use the newvhunit[^]:
min-height: 100vh;
这篇关于Bootstrap和min-height问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
