Question

我在另一个包含position:absolute和top:100%的容器中创建了一个容器。这个容器曾经是某种淡出容器，所以它实际上没有真正的内容。

现在，当此容器高度超过浏览器窗口高度时，会出现滚动条。这正是不发生的原因。

相反，我认为我可以在身体或父容器上应用overflow:hidden，但要么太多被切断，要么淡出容器本身变得不可见。

请查看我的fiddle并告诉我我错过了什么。谢谢！

HTML

<header>
    <h1>Demo</h1>
</header>
<footer>
  <p>
  The orange container wraps the blue one.<br/>The blue containers' height is meant to be cut off of the browser window meaning it's overflow should get hidden if the browser windows' height is insufficient.
  </p>
  <p>position: relative;<p>
  <div class="append gradient">
    <p>position: absolute;<br/>
    top: 100%;<br/>
    left: 0;<br/>
    width: 100%;<br/>
    height: 100%;</p>
  </div>
</footer>
...

CSS

body {background: 333;}

header, footer, .append {
  font-family: consolas, console, courier, arial, helvetica;
  margin: 0 auto;
  color: #FFF;
  padding: 15px 30px;
}

header {
  background: #666;
  }
footer {
  background: #F86; 
  position: relative;
  height: 300px;
  /*overflow: hidden;*/
  }
.append {
  background: #66F;
  position: absolute;
  top: 100%;
  width: 100%;
  height: 500px;
  left: 0;
  }

编辑：更新小提琴，添加内联代码，添加图片

Answer 1

当您为top: 100%提供position: absolute时，您实际上是将其完全发送到下一页。我想你正在尝试创建一个模态窗口，然后你需要将它设置为：

position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;

以上代码将覆盖所有内容。此处overflow: hidden不适用，但是当您计划显示模态窗口或叠加层时，最好使用overflow: hidden <body>，这样用户就不会能够滚动，你可以找到模态窗口。

解释我在这里使用一个片段说的整个概念。单击链接以调用模态窗口。单击打开的模态窗口将其隐藏回来。滚动查看。玩弄它：

$(function () {
  $("body > p").append(' <a href="#">Open Modal</a>');
  $("p a").click(function () {
    $("body").addClass("modal-open");
    return false;
  });
  $(".mask").click(function () {
    $("body").removeClass("modal-open");
  });
});

.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  color: #fff;
  font-size: 1.5em;
  text-align: center;
}
.mask p:first-child {
  padding-top: 5em;
}
.modal-open {
  overflow: hidden;
}
.modal-open .mask {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="mask">
  <p>Click the links to invoke the modal window.</p>
  <p>Click the opened modal window to hide it back.</p>
  <p>Scroll and see. Play around with it</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda vitae temporibus corporis, quisquam, doloremque excepturi itaque laborum ratione sequi aliquid atque rerum rem minima, aperiam laboriosam blanditiis alias ex quas?</p>
<p>Quam dolor, perspiciatis! Perspiciatis voluptatibus magnam ad hic sint, officia voluptates aut labore, excepturi quasi sed sit modi amet temporibus exercitationem laudantium veniam cumque omnis quo! Esse, quas! Harum, iure!</p>
<p>Illo optio alias amet ex consequuntur est autem itaque reprehenderit odit, laboriosam saepe ipsa harum eligendi sit cumque modi cum perspiciatis! Dolorum, alias nostrum asperiores velit atque perferendis voluptatibus. Maiores!</p>
<p>Cumque perspiciatis laudantium sequi itaque eos facilis illum repellat necessitatibus sunt recusandae rem, tempore blanditiis consectetur distinctio nostrum enim sit corporis non odio deleniti architecto. Corporis, nam assumenda. Quibusdam, perspiciatis!</p>
<p>Illum, quasi nisi animi. Expedita recusandae nam maxime architecto, illo a? Aspernatur numquam eveniet quisquam, inventore fugit amet voluptatem porro odio corporis obcaecati nostrum earum aliquam recusandae, sint necessitatibus rem.</p>
<p>Id praesentium vitae tenetur harum voluptate error adipisci dignissimos vero voluptatibus numquam quibusdam, nemo molestias alias aliquam, est, esse at fugiat quasi ducimus ratione! Inventore, eaque repudiandae sed magnam incidunt!</p>
<p>Aliquid in, veritatis ut! Veritatis, voluptatibus? Fugiat iusto officia repellat quasi dolore eum odio vitae inventore error debitis, doloribus facilis, itaque! Perspiciatis iste, incidunt hic non qui voluptate rem quidem?</p>
<p>Explicabo laudantium quidem, ab aperiam autem tenetur quae voluptatem quam, mollitia recusandae sapiente id, praesentium quasi soluta tempora dolorum, maiores velit. Porro unde doloribus iste, nihil ipsa, pariatur molestias aliquam.</p>
<p>Aut excepturi vitae dicta, quos distinctio, nulla, nostrum architecto, atque veritatis perspiciatis voluptates odio. Similique nobis sed natus illo esse, quod quas ex tenetur dolore deserunt optio voluptate numquam quo.</p>
<p>Repudiandae inventore consequatur nisi ad ut voluptas pariatur ducimus consequuntur, exercitationem tenetur ipsam nesciunt beatae nostrum soluta similique excepturi perspiciatis consectetur illum veniam aut hic, neque eveniet. Nesciunt quas, placeat?</p>
<p>Unde nam, aut placeat. Voluptas, consequatur, quis. Perferendis illum ratione in voluptate consectetur molestias nam hic, reprehenderit similique distinctio. Repellendus veritatis excepturi hic dicta fuga mollitia! Culpa dolores doloribus, ratione.</p>
<p>Vero cupiditate quaerat sit non veritatis harum nesciunt eos suscipit tempore dolorem porro saepe a, iusto vitae, voluptatum debitis consectetur voluptas, corporis. Sequi, sint odio eligendi delectus culpa dignissimos, obcaecati?</p>
<p>Ipsam sequi facilis magnam ad officiis quae, nobis iusto, commodi culpa optio a facere numquam placeat perspiciatis saepe maxime mollitia voluptatem sunt ipsa? Sequi ipsam, nostrum blanditiis dicta repudiandae iste!</p>
<p>Facilis tenetur officia quo delectus eius quam vel minus quas nesciunt ipsa perferendis, explicabo quasi itaque, rem vero accusamus debitis quis pariatur blanditiis illo nostrum eum! Molestiae fuga eius, illum.</p>
<p>Accusantium, repellendus soluta modi animi cumque error, nemo doloremque. Commodi voluptates distinctio nesciunt animi a, odio assumenda exercitationem amet reprehenderit libero expedita fugit. Id minus, corporis quibusdam cupiditate aut harum!</p>

正确使用'overflow：hidden'和'position：absolute'

1 个答案: