引导 - 孩子填写父母的100％，但不大于

html,body, .container-fluid { 
 
    height: 100%; 
 
    border: 1px solid orange; 
 
} 
 

 
.page-header { 
 
    padding-bottom: 2%; 
 
    padding-top: 2%; 
 
} 
 

 
#icons { 
 
    border: 1px solid red; 
 
} 
 

 
.row-eq-height { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    border: 1px solid green; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class='container-fluid'> 
 
    <div class='row'> 
 
    <div id='header' class='page-header col-lg-12 col-sm-12 col-xs-12 col-md-12'> 
 
     <div class='col-lg-2 col-md-2 col-sm-2 col-xs-3'><img id='logo' src='img/logo.png' class='img-responsive'></div> 
 
     <div id='icons' class='col-lg-2 col-lg-offset-2 col-md-3 col-md-offset-2 col-sm-4 col-sm-offset-2 col-xs-12 col-lg-offset-2'>icons</div> 
 
    </div> 
 
    <div id='navigation' class='col-lg-12 col-sm-12 col-xs-12 col-md-12' style='border:1px solid black;height:100%;'>navigation</div> 
 
    </div> 
 

 
    <div class='row row-eq-height'> 
 
    <div id='left' class='col-lg-2 col-sm-4 col-xs-8 col-md-2' style='border:1px solid green;'>left</div> 
 
    <div id='right' class='col-lg-10 col-sm-10 col-xs-10 col-md-10' style='border:1px solid green;'>right<br></div> 
 
    </div> 
 
</div>

编辑：

不过也许我不是那么清楚其实我是想，让我再试一次另一个画面：

我想要的侧边栏和内容的div来填充父div的所有其余部分，而不使用滚动条，这样它就不会比实际的父div更大。如果我对孩子使用高度：100％，它会变得很大，因为它需要（导航+标题）+ 100％。所以我尝试了几件事情。我尝试用带有boostrap4的柔性盒，它没有工作，因为我想。我可以说身高：calc（100％ - x）。但问题是x不是一个固定值，因为它具有响应性。

那么我能做些什么来填充父母的其余部分（100％），让孩子拥有100％的最小高度而不会扩大页面？

来源

2017-08-15 André

一般来说，将样式应用到网格或布局系统的元素是一个坏主意。这样做基本上是“黑客攻击核心”，这使得开发和维护变得更加困难。使用网格布局您的内容，并在网格内使用内容容器来应用其他布局样式。 – isherwood

只需将.row-eq-height的高度设置为自动。

我的意思是这样的：

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    border: 1px solid green; 
    height: auto; 
}

如果你愿意，你也可以提供一个最小高度类似min-height:100px;

看看这个小提琴：https://jsfiddle.net/digitalrevenge/p7q0ohrf/

来源

2017-08-15 17:10:38 sequel

谢谢，但这并不能真正解决问题，因为左侧和右侧仍然不会结束在页面的底部，只是我想要的px高度。 –

@André是的，但高度会根据您放入容器的内容自动调整。你能更具体地了解你想要达到的目标吗？ – sequel

它很好，它调整自己。但我会需要它有一个最小高度：100％，所以当我给它另一种背景色时，它会覆盖整个页面的其余部分。这就是为什么我需要在“左”和“右”的最低高度：）...你有解决方案吗？ –

我明白了，你正在固定你的容器的高度。这是造成这个问题的原因。从容器中移除高度，因为这是灵活的，所以您的内容区域将自动增长。您还可以从.row-eq-height类和导航中删除高度。休息是好的。

来源

2017-08-15 20:43:57 Khurram

它不能解决问题，我编辑了我的实际问题。 –

引导 - 孩子填写父母的100％，但不大于

回答

相关问题