当我使用百分比值时，为什么div的高度不会改变？

我试图让我的视口大小的75％的高度。当我使用像素值时，它会增加高度，但是当我使用百分比时，它显示为非常细的线条，并且不会更改。当我使用百分比值时，为什么div的高度不会改变？

这是我的HTML：

<body> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-8 col-md-offset-2" id="main-wrapper"> </div> 
      </div> 
     </div> 
</body>

这是我的CSS：

#main-wrapper { 
     background-color: blue; 
     height: 75%; 
}

来源

2016-11-30 Nikolas

尝试75vh，高度不能给出个..我们可以将其设置为查看端口高度 –

高度可以以百分比@NuthanKumar给出，但随后将取决于其父项 – Dherya

更改容器的高度。 – BigMonkey89WithaLeg

你为什么不指定宽度是多少？，将宽度属性添加到您的代码中以查看您的div。

html, 
 
body, 
 
div { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#main-wrapper { 
 
    background-color: blue; 
 
    height: 75%; 
 
    width: 100%; 
 
}

<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-2" id="main-wrapper">hai</div> 
 
    </div> 
 
    </div> 
 
</body>

来源

2016-11-30 05:27:04

因为我在课堂上指定了栏宽，所以我不认为必须这样做。 – Nikolas

它不需要向宽度的DIV，因为它已经是块元素。所有你需要做的是指定它的父母的高度。

在这种情况下，它可能是row或body元素。

html, 
 
body, 
 
.container-fluid, 
 
.row { 
 
    height: 100%; 
 
} 
 
#main-wrapper { 
 
    background-color: blue; 
 
    height: 75%; 
 
}

<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-2" id="main-wrapper">hai</div> 
 
    </div> 
 
    </div> 
 
</body>

注意：不建议使用百分比高度上父母是不固定的，可能导致设计问题。

此外，如果你使用的是标准的框架，不用于这一目的编辑默认的CSS，添加自己的class或id操纵其高度

来源

2016-11-30 06:02:03

当我使用百分比值时，为什么div的高度不会改变？

回答

相关问题