CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
D3181
D3181

Reputation: 2092

bootstrap, pre height of container element

Hi im having issues laying out a html pre to be the height of the container element in twitter-bootstrap. Currently the i have tried a few methods to solve the problem i found on stack-overflow however the few that worked resulted in the div actually overflowing over the container element:

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

This resulted in pre element becoming the size of the page and flowing over the container element.

<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>

This method did not result in any changes at all to the presentation of the content either and remained just 100% to fit the content inside the pre tag rather than filling the container. Is there a simple way to stretch the pre tag to fill bootstraps container element?

Note that i have tried a number of ways and the only one im reluctant to try is editing bootstraps css so container has this attribute:

display: flex;

For childs:

align-items: stretch;

As i would prefer not to modify bootstraps css file. Any help would be appreciated :)

Upvotes: 0

Views: 1027

Answers (1)

Toby
Toby

Reputation: 13385

This can most simply be achieved by using position: absolute; on the <pre> element and position: relative; on the containing element, then setting top: 0; and bottom: 0; on the <pre> element.

See for more detail: http://jsbin.com/wurufo/edit?html,css,output

Note: I have made some amendments to your HTML because I'm not sure what your intention is by using <container> as an HTML element. Also, I have taken steps to ensure the <h2> appears over the <pre> because I'm not 100% certain what your goal was there.

Upvotes: 1

Related Questions