Modal body between header and footer to be scrollable to the end dynamically
0
I have this modal with header and footer. I want the body to be scrollable as the content is very long but the height of the body should end where the footer starts.
Currently the body height is overlapping the footer and thus you can't see the content on the bottom of body.
I don't know the height of the device. How can I make the body to be dynamic between header and footer and scroll from top to bottom and be able to see all elements?
PS: the header height is dynamic so I don't know the value but the bottom height can be set
body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
height: 100%;
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
}<body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>css
asked Nov 23 '18 at 3:25
DudisDudis
291426
add a comment |
0
I have this modal with header and footer. I want the body to be scrollable as the content is very long but the height of the body should end where the footer starts.
Currently the body height is overlapping the footer and thus you can't see the content on the bottom of body.
I don't know the height of the device. How can I make the body to be dynamic between header and footer and scroll from top to bottom and be able to see all elements?
PS: the header height is dynamic so I don't know the value but the bottom height can be set
body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
height: 100%;
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
}<body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>css
asked Nov 23 '18 at 3:25
DudisDudis
291426
add a comment |
0
0
0
I have this modal with header and footer. I want the body to be scrollable as the content is very long but the height of the body should end where the footer starts.
Currently the body height is overlapping the footer and thus you can't see the content on the bottom of body.
I don't know the height of the device. How can I make the body to be dynamic between header and footer and scroll from top to bottom and be able to see all elements?
PS: the header height is dynamic so I don't know the value but the bottom height can be set
body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
height: 100%;
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
}<body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>css
asked Nov 23 '18 at 3:25
DudisDudis
291426
I have this modal with header and footer. I want the body to be scrollable as the content is very long but the height of the body should end where the footer starts.
Currently the body height is overlapping the footer and thus you can't see the content on the bottom of body.
I don't know the height of the device. How can I make the body to be dynamic between header and footer and scroll from top to bottom and be able to see all elements?
PS: the header height is dynamic so I don't know the value but the bottom height can be set
body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
height: 100%;
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
}<body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
height: 100%;
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
}<body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
height: 100%;
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
}<body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>css
css
asked Nov 23 '18 at 3:25
DudisDudis
291426
asked Nov 23 '18 at 3:25
DudisDudis
291426
edited Nov 23 '18 at 3:48
Dudis
asked Nov 23 '18 at 3:25
DudisDudis
291426
asked Nov 23 '18 at 3:25
DudisDudis
291426
asked Nov 23 '18 at 3:25
DudisDudis
291426
291426
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
2
As you clearly said that bottom height can be set.
Assume a height to the modal-footer and set the height for the body using calc property
so it will take the entire height except the height for the footer content.
Try this
body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
margin-bottom:50px;
height: calc(100% - 100px);/*Added height here*/
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
} <body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>answered Nov 23 '18 at 6:13
ViiraViira
2,373526
add a comment |
0
refer to this answer
How to put scrollbar only for modal-body in bootstrap modal dialog
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}
answered Nov 23 '18 at 4:45
Gene SesconGene Sescon
1297
Thanks @Gene, I know I can set the height myself but as mentioned in the post I would prefer some dynamic approach. I believe it should be possible to do this with flex or something else~
– Dudis
Nov 23 '18 at 5:04
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440303%2fmodal-body-between-header-and-footer-to-be-scrollable-to-the-end-dynamically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
As you clearly said that bottom height can be set.
Assume a height to the modal-footer and set the height for the body using calc property
so it will take the entire height except the height for the footer content.
Try this
body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
margin-bottom:50px;
height: calc(100% - 100px);/*Added height here*/
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
} <body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>answered Nov 23 '18 at 6:13
ViiraViira
2,373526
add a comment |
2
As you clearly said that bottom height can be set.
Assume a height to the modal-footer and set the height for the body using calc property
so it will take the entire height except the height for the footer content.
Try this
body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
margin-bottom:50px;
height: calc(100% - 100px);/*Added height here*/
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
} <body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>answered Nov 23 '18 at 6:13
ViiraViira
2,373526
add a comment |
2
2
2
As you clearly said that bottom height can be set.
Assume a height to the modal-footer and set the height for the body using calc property
so it will take the entire height except the height for the footer content.
Try this
body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
margin-bottom:50px;
height: calc(100% - 100px);/*Added height here*/
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
} <body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>answered Nov 23 '18 at 6:13
ViiraViira
2,373526
As you clearly said that bottom height can be set.
Assume a height to the modal-footer and set the height for the body using calc property
so it will take the entire height except the height for the footer content.
Try this
body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
margin-bottom:50px;
height: calc(100% - 100px);/*Added height here*/
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
} <body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body> body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
margin-bottom:50px;
height: calc(100% - 100px);/*Added height here*/
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
} <body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body> body {
width:450px;
background:#f4f4f4;
margin:0 auto;
}
.modal {
visibility:visible;
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10;
background: #fff;
width:inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.modal-header {
background: gray;
padding:20px;
}
.modal-body {
-webkit-box-flex: 1;
flex-shrink: 1;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
display: block;
position: fixed;
margin-bottom:50px;
height: calc(100% - 100px);/*Added height here*/
}
.modal-footer {
display: block;
-webkit-box-flex: 0;
flex-shrink: 0;
z-index: 1;
background:#FFF;
bottom: 0;
height: auto;
position: fixed;
width:100%;
padding:10px;
} <body>
<div>
<p>
content
</p>
</div>
<div class='modal'>
<div class='modal-header'>
<input type='text'/>
<input type='text'/>
</div>
<div class='modal-body'>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>too long</div>
<div>LAST VISIBLE ELEMENT</div>
</div>
<div class='modal-footer'>
<button>
click
</button>
</div>
</div>
</body>answered Nov 23 '18 at 6:13
ViiraViira
2,373526
answered Nov 23 '18 at 6:13
ViiraViira
2,373526
answered Nov 23 '18 at 6:13
ViiraViira
2,373526
answered Nov 23 '18 at 6:13
ViiraViira
2,373526
2,373526
add a comment |
add a comment |
0
refer to this answer
How to put scrollbar only for modal-body in bootstrap modal dialog
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}
answered Nov 23 '18 at 4:45
Gene SesconGene Sescon
1297
Thanks @Gene, I know I can set the height myself but as mentioned in the post I would prefer some dynamic approach. I believe it should be possible to do this with flex or something else~
– Dudis
Nov 23 '18 at 5:04
add a comment |
0
refer to this answer
How to put scrollbar only for modal-body in bootstrap modal dialog
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}
answered Nov 23 '18 at 4:45
Gene SesconGene Sescon
1297
Thanks @Gene, I know I can set the height myself but as mentioned in the post I would prefer some dynamic approach. I believe it should be possible to do this with flex or something else~
– Dudis
Nov 23 '18 at 5:04
add a comment |
0
0
0
refer to this answer
How to put scrollbar only for modal-body in bootstrap modal dialog
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}
answered Nov 23 '18 at 4:45
Gene SesconGene Sescon
1297
refer to this answer
How to put scrollbar only for modal-body in bootstrap modal dialog
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}
answered Nov 23 '18 at 4:45
Gene SesconGene Sescon
1297
answered Nov 23 '18 at 4:45
Gene SesconGene Sescon
1297
answered Nov 23 '18 at 4:45
Gene SesconGene Sescon
1297
answered Nov 23 '18 at 4:45
Gene SesconGene Sescon
1297
1297
Thanks @Gene, I know I can set the height myself but as mentioned in the post I would prefer some dynamic approach. I believe it should be possible to do this with flex or something else~
– Dudis
Nov 23 '18 at 5:04
add a comment |
Thanks @Gene, I know I can set the height myself but as mentioned in the post I would prefer some dynamic approach. I believe it should be possible to do this with flex or something else~
– Dudis
Nov 23 '18 at 5:04
Thanks @Gene, I know I can set the height myself but as mentioned in the post I would prefer some dynamic approach. I believe it should be possible to do this with flex or something else~
– Dudis
Nov 23 '18 at 5:04
Thanks @Gene, I know I can set the height myself but as mentioned in the post I would prefer some dynamic approach. I believe it should be possible to do this with flex or something else~
– Dudis
Nov 23 '18 at 5:04
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440303%2fmodal-body-between-header-and-footer-to-be-scrollable-to-the-end-dynamically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
