个人中心
gpt4 book ai didi

html - 制作部分不在屏幕上的 div，它不会向屏幕添加水平滚动

转载 作者：行者123 更新时间：2023-12-04 15:10:10 25 4
gpt4 key购买 nike 

/* body{
    overflow-x: hidden;
} */
.divOne{
    /* overflow-y: hidden; */
    position: relative;
    background-color: aqua;
    height: 100px;
    width: 100%;
}
.divTwo{
    background-color: red;
    height: 300px;
    width: 300px;
    position: absolute;
    top: -30px;
    right: -80px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./index.css" />

    <title>learning about canvas</title>
  </head>
  <body>
    <div class="container-div">
      <div class="divOne">div1</div>
      <div class="divTwo">div2</div>
    </div>
  </body>
</html>

我想让水平滚动条不会出现在下方。我想让溢出的 2 div overflow: hidden 。但是 overflow : hidden 仅在应用于 body 时才起作用，这会导致很多问题。

最佳答案

您需要为 container-div 添加绝对定位规则类，body 的相对定位标签，带有 overflow-x: hidden规则。

现在你的街区.divTwo隐藏在可视区，我的宽度是300x300。

body {
    position: relative;
    overflow-x: hidden;
}

.container-div {
    position: absolute;
    left: 0;
    right: 0;
}

.divOne{
    /* overflow-y: hidden; */
    background-color: aqua;
    height: 100px;
    width: 100%;
}
.divTwo{
    background-color: red;
    height: 300px;
    width: 300px;
    position: absolute;
    top: -30px;
    right: -80px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./index.css" />

    <title>learning about canvas</title>
  </head>
  <body>
    <div class="container-div">
      <div class="divOne">div1</div>
      <div class="divTwo">div2</div>
    </div>
  </body>
</html>

关于html - 制作部分不在屏幕上的 div，它不会向屏幕添加水平滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65345820/

25 4 0
文章推荐： deep-learning - Coco 数据集中的类
文章推荐： python - Pandas 搜索字符串的特定列
文章推荐： flutter - 无法从 Assets 文件夹加载图像(无缩进问题)
文章推荐： javascript - 从 Promise 的 catch 添加到现有的 Promises.all 数组
行者123
个人简介

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

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