个人中心
gpt4 book ai didi

html - 'overflow: hidden' 和 'position: absolute' 的正确用法

转载 作者：行者123 更新时间：2023-11-28 16:32:29 24 4
gpt4 key购买 nike

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

little content

现在当这个容器的高度超过浏览器窗口的高度时，会出现一个滚动条。而这正是不应该发生的事情。

much content

相反，我认为我可以在 body 或父容器上应用 overflow:hidden，但是要么太多被切断，要么 fade-out-container 本身变得不可见。

overflow hidden on body almost does the job

请看我的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;
  }

编辑:更新 fiddle ，添加内联代码，添加图片

最佳答案

当你给 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>

关于html - 'overflow: hidden' 和 'position: absolute' 的正确用法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34332040/

24 4 0
文章推荐： javascript - 如何使用 opencart 将结帐页面下拉箭头更改为加号/减号？
文章推荐： Python:中心阵列图像
文章推荐： html - 带有 div 和 css 的响应图像(无 img 标签)
文章推荐： javascript - 如何在 jQuery/Javascript 中删除此突出显示脚本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com