inline div - 将底部拉伸到底部但保持顶部内嵌

我已经尝试了底部0，高度100％，reletave /绝对，并且我似乎无法得到此工作。如果有内置的东西，我使用引导程序。我想尝试做到这一点，而没有弯曲BC不兼容，也试过了，无法让它工作。inline div - 将底部拉伸到底部但保持顶部内嵌

#dockfill { 
    /* these aren't working */ 
    height: 100%; 
    bottom: 0px; 
    margins: auto; 
    min-height: 100%; 
}

<div id="parent"> 
    <div>junk</div> 
    <h2>hello</h2> 
    <div id="dockfill">I want this one to always fill remaining space</div> 
</div>

来源

2016-12-31 toddmo

除非你需要支持IE <10，Flexbox的应该做工精细的布局：https://jsfiddle.net/joc63gec/ –

你要不来提供的解决方案应对？ – connexo

@connexo，我能够解决它，而无需重做html或使用JQuery。我打算在自己的问题上发布我的答案，但我还没有时间。 – toddmo

下面是固定它的代码。

<div class="container-fluid" style="position: absolute;top: 50px;bottom: 25px;width: 100%;"> 
    <div class="row content" style="height:100%"> 
     <!-- LIST OR OBJECT DETAILS AREA --> 
     <div class="col-sm-10" style="height:100%;padding-top:5px;"> 
     Stuff... 
     </div> 
    </div> 
    </div>

来源

2017-02-22 19:41:28 toddmo

如果你愿意稍微修改HTML，您可以使用CSS表如下：

.container { 
 
    border: 2px solid red; 
 
    border-spacing: 10px; 
 
    display: table; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    width: 300px; 
 
} 
 
.container .tr { 
 
    display: table-row; 
 
} 
 
.container .a, 
 
.container .b { 
 
    border: 2px solid red; 
 
    display: table-cell; 
 
    height: 20px; 
 
} 
 
.container .fill { 
 
    border: 2px solid green; 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div class="tr"> 
 
    <div class="a"></div> 
 
    </div> 
 
    <div class="tr"> 
 
    <div class="b"></div> 
 
    </div> 
 
    <div class="tr"> 
 
    <div class="fill"></div> 
 
    </div> 
 
</div>

http://codepen.io/connexo/pen/dNbvbg

一点题外话，从未使用IDS在CSS选择器。 总是用来代替。

来源

2016-12-31 19:05:14 connexo

我不同意你的观点。 ID很好用 - 重要的是理解CSS的特殊性' –

在20年的前端开发中，我没有遇到过使用'id'选择器有意义的单一情况，但我有数百个人们再现不必要的冗长选择器，或者更糟糕的是，使用'！important'来解决基于id选择器使用的问题。 – connexo

我一直使用ID来创建模块化组件。使用父'section'或'article'上的单个ID创建完整的HTML/CSS包很容易，然后该部分中的所有子规则都可以使用类或节点选择器来应用属性。 –

这里有一个方法，使用jQuery：

https://jsfiddle.net/ynhzb2r1/

$(document).ready(function() { 
    var innerElHeight = 0, 
     parentHeight = $('#parent').outerHeight(true); 
    $('#parent > *:not("#dockfill")').each(function() { 
     innerElHeight += $(this).outerHeight(true); 
    }); 
    console.log(innerElHeight); 
    var dockHeight = parentHeight - innerElHeight; 
    $('#dockfill').height(dockHeight); 
});

来源

2016-12-31 19:08:00

我没有使用jQuery，但谢谢。很高兴知道。 – toddmo

inline div - 将底部拉伸到底部但保持顶部内嵌

回答

相关问题