我拍摄了一个CSS图像库（https://codepen.io/gabrielajohnson/pen/EMVxEL），我想在我的项目中使用它。
问题在于图库使用html,body {width:100%,height:100%}的效果正常。但是在我的情况下，画廊位于height: 100%无法使用的Bootstrap模式下，它给我的高度为 0 。我无法使用以px为单位的高度，因为我不知道Gallery有多少个项目。
您有什么想法，我该如何解决？我试图在模式窗口中使用min-height:100%,height:100%，但没有结果。
这是我的CodePen示例：https://codepen.io/Piticu/pen/zYYLrKY
您会在Bootstrap 3中找到一个基本的HTML代码段，其中包含对应的CSS，以实现100％模态高度。将其用作主要结构，并在模态主体中建立图片库。
<body>
<div class="container">
<div class="row text-center">
<h3>The Large Modal</h3>
<a href="#" class="btn btn-lg btn-primary"
data-toggle="modal" data-target="#lgModal">
Click to open Modal </a>
</div>
</div>
<div class="modal fade" id="lgModal" tabindex="-1" role="dialog" aria-labelledby="lgModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Large Modal</h4>
</div>
<div class="modal-body">
<div class="gallery">
GALLERY <!-- here your gallery -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
使用此CSS
html,body {
height: 100%;
}
body {
position: relative;
}
body > .container,body > .container-fluid {
min-height: 100%;
}
.modal {
position: absolute;
top:5%; bottom:5%; /* see .modal-dialog below */
height: auto;
}
.modal-dialog {
/* 100% - top 5% - bottom 5% */
height: 90%;
}
.modal-content {
height: 100%;
}
.modal-body {
/* 100% - heightModalFooter */
height: calc(100% - 160px);
}
.gallery {
position: relative;
height: 100%;
background-color: #eee; /* remove this line,for test only */
}