如何在全高和小高浏览器上显示全灯箱图像？答案

【问题标题】：How to show Full Lightbox Image on Full and Small Height Browsers?如何在全高和小高浏览器上显示全灯箱图像？
【发布时间】：2020-08-09 00:04:49
【问题描述】：

您好，我正在尝试使用灯箱展示我的作品集。现在，当浏览器高度已满时，您可以看到整个图像以及段落和按钮。

问题是当浏览器高度较小时，您会看到两个滚动条（我只想要一个），并且您无法向下滚动并查看按钮。我担心笔记本电脑较小的人看不到按钮。

所以这是我需要帮助的两件事

如何只有一个滚动条？
如何设置滚动条到scr

HTML

    <!-- ================= Image & Lightbox Container ================== -->

    <!-- PHOTO BOOTH TEMPLATE KING -->

    <div class="single-content webdesign webdev grid-item">
      <a href="#img21">
        <img
          class="p2"
          src="http://ruben123.com/img/ruben-123-Portfolio-img/web-design/Photo-booth-template-king_Web-Design_01.jpg"
        />
      </a>
    </div>

    <!-- lightbox container hidden with CSS -->

    <a href="#_" class="lightbox" id="img21">
      <div class="image-button-container bg-white p-2">
        <img
          src="http://ruben123.com/img/ruben-123-Portfolio-img/web-design/Lightbox/Photo-booth-template-king_Web-Design-light-box_01.jpg"
        />
        <div class="button-text-container">
          <p class="py-1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
            temporibus suscipit magni deleniti accusamus fuga dolores et
            dignissimos quo, odio officia nihil dicta maiores eos ut nobis
            id iure facere.
          </p>

          <!-- ======================== ****** Buttons Container ****** ======================== -->
          <div class="buttons-container">
            <!-- Button Download -->
            <form
              method="get"
              action="img/ruben-123-Portfolio-img/downloads/PBT-King-Web-Design.zip"
            >
              <button class="btn-dark" type="submit">Download PSD</button>
            </form>

            <!-- Visit Website -->
            <button
              class="btn-dark"
              onclick="window.location.href = 'https://photoboothtemplateking.com/';"
            >
              Visit Website
            </button>
          </div>
          <!-- ======================== ****** Buttons Container ****** ======================== -->
        </div>
      </div>
    </a>

    <!-- ================= ******************* IMAGE & LIGHTBOX CONTAINER - END ******************* ================== -->

SCSS

/** LIGHTBOX WEBSITE MARKUP **/

.lightbox {
  /** Default lightbox to hidden */
  display: none;

  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  width: 100%;
  display: block;
  max-height: 100%;
  // margin-top: 2%;
}

.image-button-container {
  // position: absolute;
  width: 50%;
  margin: 2% auto;
  display: block;
  overflow: auto;
  height: 100%;
  position: relative;
}

.lightbox .button-text-container {
  p {
    // width: 40%;
    // color: white;
    display: block;
    position: relative;
  }

  .buttons-container {
    // position: absolute;
    // bottom: 40px;
    display: flex;
    justify-content: center;
    // display: block;
    // position: relative;

    .btn-dark {
      margin: 0 1rem;
      border: 3px solid white;
    }
  }
}

.lightbox:target {
  /** Remove default browser outline */
  outline: none;

  /** Unhide lightbox **/
  display: block;
}

【问题讨论】：

标签： html css sass lightbox

【解决方案1】：

.lightbox {
  /** Default lightbox to hidden */
  display: none;

  /** Position and style */
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  width: 100%;
  display: block;
  max-height: 100%;
  // margin-top: 2%;
}

.image-button-container {
  // position: absolute;
  width: 50%;
  margin: 2% auto;
  display: block;
  overflow: auto;
  height: auto;
  overflow-y: scroll;
  max-height: 90vh;
  position: relative;
}

.lightbox .button-text-container {
  p {
    // width: 40%;
    // color: white;
    display: block;
    position: relative;
  }

  .buttons-container {
    // position: absolute;
    // bottom: 40px;
    display: flex;
    justify-content: center;
    // display: block;
    // position: relative;

    .btn-dark {
      margin: 0 1rem;
      border: 3px solid white;
    }
  }
}

.lightbox:target {
  /** Remove default browser outline */
  outline: none;

  /** Unhide lightbox **/
  display: block;
}
.p2 {
  width: 100%;
}

<div class="container portfolio">
    <div class="single-content webdesign webdev grid-item">
      <a href="#img21">
        <img
          class="p2"
          src="http://ruben123.com/img/ruben-123-Portfolio-img/web-design/Photo-booth-template-king_Web-Design_01.jpg"
        >
      </a>
    </div>

    <!-- lightbox container hidden with CSS -->

    <a id="img21" href="#_" class="lightbox">
      <div class="image-button-container bg-white p-2">
        <img
          src="http://ruben123.com/img/ruben-123-Portfolio-img/web-design/Lightbox/Photo-booth-template-king_Web-Design-light-box_01.jpg"
        >
        <div class="button-text-container">
          <p class="py-1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
            temporibus suscipit magni deleniti accusamus fuga dolores et
            dignissimos quo, odio officia nihil dicta maiores eos ut nobis
            id iure facere.
          </p>

          <!-- ======================== ****** Buttons Container ****** ======================== -->
          <div class="buttons-container">
            <!-- Button Download -->
            <form
              method="get"
              action="img/ruben-123-Portfolio-img/downloads/PBT-King-Web-Design.zip"
            >
              <button class="btn-dark" type="submit">Download PSD</button>
            </form>

            <!-- Visit Website -->
            <button
              class="btn-dark"
              onclick="window.location.href = 'https://photoboothtemplateking.com/';"
            >
              Visit Website
            </button>
          </div>
          <!-- ======================== ****** Buttons Container ****** ======================== -->
        </div>
      </div>
    </a>
  </div>

为了防止正文滚动，这是我的参考。 Prevent body from scrolling

您忘记将图像的宽度设置为 100%，我已将最大高度设置为 90vh，并使用 flex 将其对齐到中心。

希望对你有所帮助。

【讨论】：