html - 使固定的 Css 灯箱内容可滚动

Question

我有一个图片库的 css 灯箱，在灯箱中打开的图像必须很大，以便其内容易于阅读。灯箱容器是固定的，但我需要图像在 y 轴上可滚动。

我看过这个问题:Scroll part of content in fixed position container ，但是当我将解决方案添加到我的代码时它不起作用。我也看到了这个:How to make a "Fixed" element Scrollable ，但我不希望在我的代码中使用 JavaScript。

我的代码是这样的:

HTML

<!-- Lightbox usage markup -->
                <ul>
                    <li class="" id="portfolio_item">
                        <!-- thumbnail image wrapped in a link -->
                        <a href="#img1">
                            <img src="images/Templates/template_01/Template_01_thumb.png" width=""  height="150px">
                        </a>
                    </li>
                </ul>
                <!-- lightbox container hidden with CSS -->
                <a href="#_" class="lightbox" id="img1">
                    <img src="images/Templates/template_01/Template_01.png" class="lightbox_content">
                </a>

CSS

    /*************************************
 * Basic lightbox styles. Notice the
 * default 'display' is 'none'.
 */

.lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: auto;
  padding:10px;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  margin-top: 2%;
  overflow-y:scroll;
  height:100%;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

我意识到这一定很简单，但我尝试了所有我能想到的方法，但仍然无法正常工作。谢谢您的帮助。

更新: 我将 CSS 更改为:

    .lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: auto;
  padding:10px;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox_content{
  /** Pad the lightbox image */
  max-width: 90%;
  width:auto;
  min-width:30%;
  margin-top: 2%;
  overflow-y:scroll;
  max-height:10000px;
  height:3623px; 

}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

但它仍然没有滚动。

Answer 1

请参阅 CSS 代码底部的注释以获取解释:

/*************************************
 * Basic lightbox styles. Notice the
 * default 'display' is 'none'.
 */

.lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: auto;
  padding:10px;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  margin-top: 2%;
  overflow-y:scroll;
  height:100%;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

/*========== ADDED THIS ==========*/
.lightbox {
    width: 300px; /* set arbitrary dimensions */
    height: 300px;
    overflow: scroll; /* causes .lightbox to be scrollable if children overflow it */
}

.lightbox img {
    max-width: none; /* max-width: 90%; <---- don't set this (otherwise image will never overflow parent)*/
    margin-top: 2%;
    overflow-y: visible; /* overflow-y: scroll; <---- don't set this (images can't contain anythying, so nothing can overflow from them*/
    height: auto;  /* height: 100%; <---- don't set this (otherwise image will never overflow parent)*/
}  

<!-- Lightbox usage markup -->
                <ul>
                    <li class="" id="portfolio_item">
                        <!-- thumbnail image wrapped in a link -->
                        <a href="#img1">
                            <img src="http://www.lorempixel.com/600/600" width=""  height="150px">
                        </a>
                    </li>
                </ul>
                <!-- lightbox container hidden with CSS -->
                <a href="#_" class="lightbox" id="img1">
                    <img src="http://www.lorempixel.com/600/600" class="lightbox_content">
                </a>