How to make panels full height of parent div?

I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.

My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.

Can someone tell me how I can set them to always take the full height, independent of their content? Basically, what I am trying to achieve is to have all 4 panels take the same height as they appear in one row - they only thing the differ is the paragraph with the variable text, everything else is the same for all panels and takes the same height for each of them.

Example panel:

<form role="form">

    <div class="row">

        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

            <div class="thumbnail thumbnail-hover">

                <div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>

                    <div class="caption">

                        <h3 class="text-primary">Title</h3>

                        <p>Some variable text</p>

                        <p><a href="#" class="btn btn-info btn-block btn-responsive" target="_self">View</a></p>

                    </div>

            </div>

        </div>

    </div>

    // ...same structure for other panels...

</form>

edited Dec 29 '18 at 13:15

halfer

14.4k758109

asked Sep 17 '14 at 13:56

user2571510

3,8212971117

add a comment |

I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.

My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.

Example panel:

<form role="form">

    <div class="row">

        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

            <div class="thumbnail thumbnail-hover">

                <div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>

                    <div class="caption">

                        <h3 class="text-primary">Title</h3>

                        <p>Some variable text</p>

                        <p><a href="#" class="btn btn-info btn-block btn-responsive" target="_self">View</a></p>

                    </div>

            </div>

        </div>

    </div>

    // ...same structure for other panels...

</form>

edited Dec 29 '18 at 13:15

halfer

14.4k758109

asked Sep 17 '14 at 13:56

user2571510

3,8212971117

add a comment |

I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.

My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.

Example panel:

<form role="form">

    <div class="row">

        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

            <div class="thumbnail thumbnail-hover">

                <div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>

                    <div class="caption">

                        <h3 class="text-primary">Title</h3>

                        <p>Some variable text</p>

                        <p><a href="#" class="btn btn-info btn-block btn-responsive" target="_self">View</a></p>

                    </div>

            </div>

        </div>

    </div>

    // ...same structure for other panels...

</form>

edited Dec 29 '18 at 13:15

halfer

14.4k758109

asked Sep 17 '14 at 13:56

user2571510

3,8212971117

I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.

My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.

Example panel:

<form role="form">

    <div class="row">

        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

            <div class="thumbnail thumbnail-hover">

                <div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>

                    <div class="caption">

                        <h3 class="text-primary">Title</h3>

                        <p>Some variable text</p>

                        <p><a href="#" class="btn btn-info btn-block btn-responsive" target="_self">View</a></p>

                    </div>

            </div>

        </div>

    </div>

    // ...same structure for other panels...

</form>

html css twitter-bootstrap twitter-bootstrap-3

edited Dec 29 '18 at 13:15

halfer

14.4k758109

asked Sep 17 '14 at 13:56

user2571510

3,8212971117

edited Dec 29 '18 at 13:15

halfer

14.4k758109

asked Sep 17 '14 at 13:56

user2571510

3,8212971117

edited Dec 29 '18 at 13:15

halfer

14.4k758109

edited Dec 29 '18 at 13:15

halfer

14.4k758109

edited Dec 29 '18 at 13:15

halfer

14.4k758109

asked Sep 17 '14 at 13:56

user2571510

3,8212971117

asked Sep 17 '14 at 13:56

user2571510

3,8212971117

asked Sep 17 '14 at 13:56

user2571510

3,8212971117

add a comment |

3 Answers
3

active

oldest

votes

To adjust the height of your thumbnail use a fixed pixel height like 300px.

.thumbnail {

    height: 300px;

}

The thumbnail class does not respond to percentage height changes.

answered Sep 17 '14 at 14:10

Dan

7,85552965

Thanks for this. I was hoping I can avoid that somehow.

– user2571510
Sep 17 '14 at 14:14

1

Check out the panel class - that might be better option over thumbnails: getbootstrap.com/components/#panels

– Dan
Sep 17 '14 at 14:15

1

Thanks - I'll go with the panel solution which seems to work here.

– user2571510
Sep 17 '14 at 14:36

add a comment |

Here is what I did: http://jsfiddle.net/o7p1jtjv/1/

By setting the .row to have a hidden overflow, and then giving each column div a margin-bottom equalling the padding-bottom, you force them to all be larger than the .row, but none of the overflowing content (extra div space) is shown.

For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/

<div class="container-fluid">

    <div class="row">

        <div class="col-xs-4">

            <p>text</p>

        </div>

        <div class="col-xs-4">

            <p>text</p>

        </div>

        <div class="col-xs-4">

            <p>text</p>

        </div>

    </div>

</div>

.row

{

    overflow: hidden;

}



.row > div

{

    background: red;

    margin-bottom: -999999px;

    padding-bottom: 999999px;

}

answered Sep 17 '14 at 14:18

Luke

2,9071228

1

Thanks a lot for this !

– user2571510
Sep 17 '14 at 14:35

add a comment |

Like @Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..

http://www.bootply.com/IwBoyELqpx

edited Sep 17 '14 at 14:41

answered Sep 17 '14 at 14:29

Zim

186k47391374

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f25892618%2fhow-to-make-panels-full-height-of-parent-div%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

To adjust the height of your thumbnail use a fixed pixel height like 300px.

.thumbnail {

    height: 300px;

}

The thumbnail class does not respond to percentage height changes.

answered Sep 17 '14 at 14:10

Dan

7,85552965

Thanks for this. I was hoping I can avoid that somehow.

– user2571510
Sep 17 '14 at 14:14

1

Check out the panel class - that might be better option over thumbnails: getbootstrap.com/components/#panels

– Dan
Sep 17 '14 at 14:15

1

Thanks - I'll go with the panel solution which seems to work here.

– user2571510
Sep 17 '14 at 14:36

add a comment |

To adjust the height of your thumbnail use a fixed pixel height like 300px.

.thumbnail {

    height: 300px;

}

The thumbnail class does not respond to percentage height changes.

answered Sep 17 '14 at 14:10

Dan

7,85552965

Thanks for this. I was hoping I can avoid that somehow.

– user2571510
Sep 17 '14 at 14:14

1

Check out the panel class - that might be better option over thumbnails: getbootstrap.com/components/#panels

– Dan
Sep 17 '14 at 14:15

1

Thanks - I'll go with the panel solution which seems to work here.

– user2571510
Sep 17 '14 at 14:36

add a comment |

To adjust the height of your thumbnail use a fixed pixel height like 300px.

.thumbnail {

    height: 300px;

}

The thumbnail class does not respond to percentage height changes.

answered Sep 17 '14 at 14:10

Dan

7,85552965

To adjust the height of your thumbnail use a fixed pixel height like 300px.

.thumbnail {

    height: 300px;

}

The thumbnail class does not respond to percentage height changes.

answered Sep 17 '14 at 14:10

Dan

7,85552965

answered Sep 17 '14 at 14:10

Dan

7,85552965

answered Sep 17 '14 at 14:10

Dan

7,85552965

answered Sep 17 '14 at 14:10

Dan

7,85552965

Thanks for this. I was hoping I can avoid that somehow.

– user2571510
Sep 17 '14 at 14:14

1

Check out the panel class - that might be better option over thumbnails: getbootstrap.com/components/#panels

– Dan
Sep 17 '14 at 14:15

1

Thanks - I'll go with the panel solution which seems to work here.

– user2571510
Sep 17 '14 at 14:36

add a comment |

Thanks for this. I was hoping I can avoid that somehow.

– user2571510
Sep 17 '14 at 14:14

1

Check out the panel class - that might be better option over thumbnails: getbootstrap.com/components/#panels

– Dan
Sep 17 '14 at 14:15

1

Thanks - I'll go with the panel solution which seems to work here.

– user2571510
Sep 17 '14 at 14:36

Thanks for this. I was hoping I can avoid that somehow.

– user2571510
Sep 17 '14 at 14:14

Check out the panel class - that might be better option over thumbnails: getbootstrap.com/components/#panels

– Dan
Sep 17 '14 at 14:15

Thanks - I'll go with the panel solution which seems to work here.

– user2571510
Sep 17 '14 at 14:36

add a comment |

Here is what I did: http://jsfiddle.net/o7p1jtjv/1/

For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/

<div class="container-fluid">

    <div class="row">

        <div class="col-xs-4">

            <p>text</p>

        </div>

        <div class="col-xs-4">

            <p>text</p>

        </div>

        <div class="col-xs-4">

            <p>text</p>

        </div>

    </div>

</div>

.row

{

    overflow: hidden;

}



.row > div

{

    background: red;

    margin-bottom: -999999px;

    padding-bottom: 999999px;

}

answered Sep 17 '14 at 14:18

Luke

2,9071228

1

Thanks a lot for this !

– user2571510
Sep 17 '14 at 14:35

add a comment |

Here is what I did: http://jsfiddle.net/o7p1jtjv/1/

For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/

<div class="container-fluid">

    <div class="row">

        <div class="col-xs-4">

            <p>text</p>

        </div>

        <div class="col-xs-4">

            <p>text</p>

        </div>

        <div class="col-xs-4">

            <p>text</p>

        </div>

    </div>

</div>

.row

{

    overflow: hidden;

}



.row > div

{

    background: red;

    margin-bottom: -999999px;

    padding-bottom: 999999px;

}

answered Sep 17 '14 at 14:18

Luke

2,9071228

1

Thanks a lot for this !

– user2571510
Sep 17 '14 at 14:35

add a comment |

Here is what I did: http://jsfiddle.net/o7p1jtjv/1/

For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/

<div class="container-fluid">

    <div class="row">

        <div class="col-xs-4">

            <p>text</p>

        </div>

        <div class="col-xs-4">

            <p>text</p>

        </div>

        <div class="col-xs-4">

            <p>text</p>

        </div>

    </div>

</div>

.row

{

    overflow: hidden;

}



.row > div

{

    background: red;

    margin-bottom: -999999px;

    padding-bottom: 999999px;

}

answered Sep 17 '14 at 14:18

Luke

2,9071228

Here is what I did: http://jsfiddle.net/o7p1jtjv/1/

For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/

<div class="container-fluid">

    <div class="row">

        <div class="col-xs-4">

            <p>text</p>

        </div>

        <div class="col-xs-4">

            <p>text</p>

        </div>

        <div class="col-xs-4">

            <p>text</p>

        </div>

    </div>

</div>

.row

{

    overflow: hidden;

}



.row > div

{

    background: red;

    margin-bottom: -999999px;

    padding-bottom: 999999px;

}

answered Sep 17 '14 at 14:18

Luke

2,9071228

answered Sep 17 '14 at 14:18

Luke

2,9071228

answered Sep 17 '14 at 14:18

Luke

2,9071228

answered Sep 17 '14 at 14:18

Luke

2,9071228

1

Thanks a lot for this !

– user2571510
Sep 17 '14 at 14:35

add a comment |

1

Thanks a lot for this !

– user2571510
Sep 17 '14 at 14:35

Thanks a lot for this !

– user2571510
Sep 17 '14 at 14:35

add a comment |

Like @Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..

http://www.bootply.com/IwBoyELqpx

edited Sep 17 '14 at 14:41

answered Sep 17 '14 at 14:29

Zim

186k47391374

add a comment |

Like @Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..

http://www.bootply.com/IwBoyELqpx

edited Sep 17 '14 at 14:41

answered Sep 17 '14 at 14:29

Zim

186k47391374

add a comment |

Like @Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..

http://www.bootply.com/IwBoyELqpx

edited Sep 17 '14 at 14:41

answered Sep 17 '14 at 14:29

Zim

186k47391374

Like @Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..

http://www.bootply.com/IwBoyELqpx

edited Sep 17 '14 at 14:41

answered Sep 17 '14 at 14:29

Zim

186k47391374

edited Sep 17 '14 at 14:41

answered Sep 17 '14 at 14:29

Zim

186k47391374

answered Sep 17 '14 at 14:29

Zim

186k47391374

answered Sep 17 '14 at 14:29

Zim

186k47391374

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk