bootstrap,容器元素的预先高度

时间:2016-07-20 19:00:29

标签: javascript jquery html css twitter-bootstrap

嗨我有问题,在twitter-bootstrap中将html pre设置为容器元素的高度。目前我已经尝试了一些方法来解决我在堆栈溢出时发现的问题但是少数工作导致div实际上溢出了容器元素:

android:background="@drawable/componentbackground"

这导致pre元素变成页面大小并流过容器元素。

<container>
<h2 class='text-center'>continer content</h2><hr/><pre style='bottom: 0;position: absolute;height:100%;overflow-y: scroll;'>
</container>

此方法不会导致对内容的呈现进行任何更改,并且仅保留100%以使内容符合预标记而不是填充容器。是否有一种简单的方法来拉伸pre标签以填充bootstraps容器元素?

请注意,我尝试了很多方法,唯一不情愿尝试的是编辑bootstraps css,因此容器具有以下属性:

<container>
<h2 class='text-center'>container content</h2><hr/><div class="col-xs-10 fh" style="background: black;"><pre style='overflow-y: scroll;'></div>
</container>

因为我不想修改bootstraps css文件。任何帮助将不胜感激:)

1 个答案:

答案 0 :(得分:1)

最简单的方法是使用position: absolute;元素上的<pre>和包含元素上的position: relative;,然后在top: 0;bottom: 0;上设置<pre>元素。

有关详情,请参阅:http://jsbin.com/wurufo/edit?html,css,output

注意:我对您的HTML进行了一些修改,因为我不确定您的意图是使用<container>作为HTML元素。此外,我已采取措施确保<h2>出现在<pre>上方,因为我不能100%确定您的目标是什么。