Bootstrap 4 Card with dynamic header and fixed body

I am using a bootstrap 4 card:

<div class="card" style="height:"500px;width:100px">

  <div class="card-body">

    <div class="top-portion">

        This portion can span from one to many lines.

    </div>

    <div class="content" style="overflow-y">

        ....

        ....

    </div>

  </div>

</div>

I need the ".content" div to occupy the remaining vertical space and be scrollable when needed. I know that I am supposed to put "max-height:..." at its style.

However, the problem is that I do not know the exact value to put because the ".top-portion" section varies in height.

asked Nov 23 '18 at 9:57

Yaskov

237

add a comment |

I am using a bootstrap 4 card:

<div class="card" style="height:"500px;width:100px">

  <div class="card-body">

    <div class="top-portion">

        This portion can span from one to many lines.

    </div>

    <div class="content" style="overflow-y">

        ....

        ....

    </div>

  </div>

</div>

I need the ".content" div to occupy the remaining vertical space and be scrollable when needed. I know that I am supposed to put "max-height:..." at its style.

However, the problem is that I do not know the exact value to put because the ".top-portion" section varies in height.

asked Nov 23 '18 at 9:57

Yaskov

237

add a comment |

I am using a bootstrap 4 card:

<div class="card" style="height:"500px;width:100px">

  <div class="card-body">

    <div class="top-portion">

        This portion can span from one to many lines.

    </div>

    <div class="content" style="overflow-y">

        ....

        ....

    </div>

  </div>

</div>

I need the ".content" div to occupy the remaining vertical space and be scrollable when needed. I know that I am supposed to put "max-height:..." at its style.

However, the problem is that I do not know the exact value to put because the ".top-portion" section varies in height.

asked Nov 23 '18 at 9:57

Yaskov

237

I am using a bootstrap 4 card:

<div class="card" style="height:"500px;width:100px">

  <div class="card-body">

    <div class="top-portion">

        This portion can span from one to many lines.

    </div>

    <div class="content" style="overflow-y">

        ....

        ....

    </div>

  </div>

</div>

I need the ".content" div to occupy the remaining vertical space and be scrollable when needed. I know that I am supposed to put "max-height:..." at its style.

However, the problem is that I do not know the exact value to put because the ".top-portion" section varies in height.

css twitter-bootstrap

asked Nov 23 '18 at 9:57

Yaskov

237

asked Nov 23 '18 at 9:57

Yaskov

237

asked Nov 23 '18 at 9:57

Yaskov

237

asked Nov 23 '18 at 9:57

Yaskov

237

asked Nov 23 '18 at 9:57

Yaskov

237

add a comment |

1 Answer
1

active

oldest

votes

    <div class="card" style="height:500px; width:100px;overflow: hidden;">

        <div class="card-body d-flex flex-column">

          <div class="top-portion mb-auto">

              This portion can span from one to many lines.

          </div>

          <div class="content" style="overflow-y:auto;max-height: 200px;">

              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

          </div>

        </div>

      </div>

use this code for your card. and "top-portion" height never disturb content. I have use "mb-auto" it means margin-bottom:auto; if you want to put content area bottom of card.

answered Nov 23 '18 at 11:27

uday

553

'max-height: 200px;' is a fixed value. the problem is that I don't want it to be fixed.
– Yaskov
Nov 23 '18 at 22:42

1

Also you can use max-height:100%. And height:auto, if its won't work than use align-self: bottom nd height:auto. But scroll only work when you consider height as well.
– uday
Nov 25 '18 at 6:49

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%2f53444375%2fbootstrap-4-card-with-dynamic-header-and-fixed-body%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

    <div class="card" style="height:500px; width:100px;overflow: hidden;">

        <div class="card-body d-flex flex-column">

          <div class="top-portion mb-auto">

              This portion can span from one to many lines.

          </div>

          <div class="content" style="overflow-y:auto;max-height: 200px;">

              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

          </div>

        </div>

      </div>

use this code for your card. and "top-portion" height never disturb content. I have use "mb-auto" it means margin-bottom:auto; if you want to put content area bottom of card.

answered Nov 23 '18 at 11:27

uday

553

'max-height: 200px;' is a fixed value. the problem is that I don't want it to be fixed.
– Yaskov
Nov 23 '18 at 22:42

1

Also you can use max-height:100%. And height:auto, if its won't work than use align-self: bottom nd height:auto. But scroll only work when you consider height as well.
– uday
Nov 25 '18 at 6:49

add a comment |

    <div class="card" style="height:500px; width:100px;overflow: hidden;">

        <div class="card-body d-flex flex-column">

          <div class="top-portion mb-auto">

              This portion can span from one to many lines.

          </div>

          <div class="content" style="overflow-y:auto;max-height: 200px;">

              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

          </div>

        </div>

      </div>

use this code for your card. and "top-portion" height never disturb content. I have use "mb-auto" it means margin-bottom:auto; if you want to put content area bottom of card.

answered Nov 23 '18 at 11:27

uday

553

'max-height: 200px;' is a fixed value. the problem is that I don't want it to be fixed.
– Yaskov
Nov 23 '18 at 22:42

1

Also you can use max-height:100%. And height:auto, if its won't work than use align-self: bottom nd height:auto. But scroll only work when you consider height as well.
– uday
Nov 25 '18 at 6:49

add a comment |

    <div class="card" style="height:500px; width:100px;overflow: hidden;">

        <div class="card-body d-flex flex-column">

          <div class="top-portion mb-auto">

              This portion can span from one to many lines.

          </div>

          <div class="content" style="overflow-y:auto;max-height: 200px;">

              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

          </div>

        </div>

      </div>

use this code for your card. and "top-portion" height never disturb content. I have use "mb-auto" it means margin-bottom:auto; if you want to put content area bottom of card.

answered Nov 23 '18 at 11:27

uday

553

    <div class="card" style="height:500px; width:100px;overflow: hidden;">

        <div class="card-body d-flex flex-column">

          <div class="top-portion mb-auto">

              This portion can span from one to many lines.

          </div>

          <div class="content" style="overflow-y:auto;max-height: 200px;">

              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

          </div>

        </div>

      </div>

use this code for your card. and "top-portion" height never disturb content. I have use "mb-auto" it means margin-bottom:auto; if you want to put content area bottom of card.

answered Nov 23 '18 at 11:27

uday

553

answered Nov 23 '18 at 11:27

uday

553

answered Nov 23 '18 at 11:27

uday

553

answered Nov 23 '18 at 11:27

uday

553

'max-height: 200px;' is a fixed value. the problem is that I don't want it to be fixed.
– Yaskov
Nov 23 '18 at 22:42

1

Also you can use max-height:100%. And height:auto, if its won't work than use align-self: bottom nd height:auto. But scroll only work when you consider height as well.
– uday
Nov 25 '18 at 6:49

add a comment |

'max-height: 200px;' is a fixed value. the problem is that I don't want it to be fixed.
– Yaskov
Nov 23 '18 at 22:42

1

Also you can use max-height:100%. And height:auto, if its won't work than use align-self: bottom nd height:auto. But scroll only work when you consider height as well.
– uday
Nov 25 '18 at 6:49

'max-height: 200px;' is a fixed value. the problem is that I don't want it to be fixed.
– Yaskov
Nov 23 '18 at 22:42

Also you can use max-height:100%. And height:auto, if its won't work than use align-self: bottom nd height:auto. But scroll only work when you consider height as well.
– uday
Nov 25 '18 at 6:49

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

搜尋此網誌

Htykuut