我想在项目中使用CSS图像库（https://codepen.io/gabrielajohnson/pen/EMVxEL。
问题是图库使用html,body {width:100%,height:100%}的效果正常。但是在我的情况下，画廊位于Bootstrap Modal中，其中height: 100%不起作用，它给了我0 height。我无法使用以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 */
}