请教， bootstrap 的 modal，如何让其高度等于屏幕的高度，然后在 modal 内部出现垂直滚动条！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3008 天前的主题，其中的信息可能已经有所发展或是发生改变。

modal

Bootstrap

请教

滚动

7 条回复 • 2016-09-26 16:26:56 +08:00

halden

2016-09-26 03:59:35 +08:00

bootstrap 默认将.modal-dialog 的高度设成 600px(>768px)，或者 auto(small screens)，要改的话用 script

$(document).ready(function(e) {
$('.modal-dialog').css({height:'100%', border: 0, padding: 0, 'max-height':'100%'});
$('.modal-content').css({height:'100%', 'max-height':'100%'});
});

滚动条在 css 里面写
.modal-content{ overflow-y:scroll; }

不知道你是不是要这样的效果，还是说你只要 content 内的 body 做滚动

sherlocktheplant

2016-09-26 09:32:38 +08:00

.modal-dialog {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.modal-content {
overflow-y: scroll;
position: absolute;
top: 0;
bottom: 0;
}

如果有没有生效的样式可以加个!important

leedstyh

2016-09-26 13:24:27 +08:00

@halden @sherlocktheplant

谢谢二位，代码很有用，十分感谢

leedstyh

2016-09-26 13:29:01 +08:00

@sherlocktheplant 另外再想把 .modal-header 部分固定在 modal 的上部呢，

leedstyh

2016-09-26 13:33:24 +08:00

@sherlocktheplant

我照猫画虎的添加了

.modal-header {
position: fixed;
top: 0;
right: 10px;
left: 0;
}

.modal-body {
padding-top: 50px;
}

但是那个关闭按钮（ x ）无法点击了

其实我就是想让 modal 的内容可以滚动，然后那个关闭按钮（ x ）一直固定在一个位置，然后用户可以不管往下拉到哪，都可以随时点击（ x ）关掉 modal 。

leedstyh

2016-09-26 14:31:55 +08:00

@sherlocktheplant

.modal-dialog {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.modal-content {
/*overflow-y: scroll; */
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}

.modal-body {
overflow-y: scroll;
position: absolute;
top: 50px;
bottom: 0;
width: 100%;
}

.modal-header .close {margin-right: 15px;}

我这么改了下，看起来可以工作，对 css 实在太不熟悉了！能麻烦帮我看下这么改行吗

sherlocktheplant

2016-09-26 16:26:56 +08:00

@leedstyh 没什么大的问题就是有点乱而已