为引导行分配基于百分比的高度

问题描述：

如何将15%的height分配给BootStrap行？为引导行分配基于百分比的高度

如果我指定15px的高度，它似乎只适用于我，否则我最终的高度为0。

答

如果您指的是要分配给该行的页面高度的15％，则可以使用视口单位。

.my-row { 
    height: 15vh; 
}

这意味着您的行高度是页高的15％。

老兄，谢谢，2答案完美地为我工作 –

答

如果您使用的元素height基于百分比的，你必须有对元素的父母之一固定高度。

如果具有固定高度的元素是直接父元素，则只需要目标元素上基于百分比的高度。

如果固定高度是最高的DOM比直接父更高的元素，你需要在目标元素和定点之间指定一个基于百分比的高度每元素高度元素。

这里的工作例如，使用直接父.container：

.container { 
 
    border: 1px solid black; 
 
    height: 200px; 
 
} 
 

 
.row { 
 
    background: red; 
 
    height: 20px; 
 
} 
 

 
.row:nth-of-type(2n) { 
 
    background: blue; 
 
    height: 80%; /* corresponds to 160px, because 160 is 80% of 200 */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
</div>

希望这有助于！ :)

老兄，谢谢，2答案完美的为我 –

真棒;乐意效劳！一旦你确认你的问题已经解决，请不要忘记[**接受答案**]（https://stackoverflow.com/help/someone-answers）点击下面的灰色检查投票按钮 - 这会将其从“未答复的问题”队列中移除，并为问题提问者和问题答疑者授予声誉。询问任何问题后，您可以在15分钟内完成。当然，在说，你没有义务标记我的答案（或任何其他人）是正确的，但标记为已解决的问题有助于保持事情顺利进行:) –

为引导行分配基于百分比的高度

相关推荐