个人中心
gpt4 book ai didi

html - 如何使固定元素在 100% 的主体后滚动？

转载 作者：行者123 更新时间：2023-11-27 22:58:21 26 4
gpt4 key购买 nike

我目前正在为一个类(class)完成期末作业。我需要创建一个基本网页(实际上，作业的主要目标是学习使用本地存储)但我在制作的早期阶段就陷入了困境(我是这方面的新手)。我一直在为网页的主要结构使用固定的 div，现在不知道如何添加更多内容。我尝试了固有位置，但一切都出错了。
代码:https://codepen.io/ipanonima/pen/WNbNeJm

正文的html:

<body>
    <div class="main">
      <div class="main-bar">
        <div class="main-bar-container">
           <div class="main-bar--logo">
              <img src="./public/logo.png">
          </div>
          <div class="main-bar--info-container">
            <div class="main-bar--info-container--buttons">
                <div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
                <div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
                <div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
            </div>
            <div class="main-bar--info-container--login">
                <div class="main-bar--info-container--login--b"><p>login</p></div>
            </div>
          </div>
        </div>
      </div>
      <div class="example-section">
        <div class="example-section--pictures" id="ex1">
          <div class="example-section--pictures-pic"><img src="./public/canada-example.jpg"></div>
          <div class="example-section--pictures--overlay"><div class="overlay--text">canadá</div></div>
        </div>
        <div class="example-section--pictures" id="ex2">
          <div class="example-section--pictures-pic"><img src="./public/mexico-example.jpg"></div>
          <div class="example-section--pictures--overlay"><div class="overlay--text">méxico</div></div>
        </div>
        <div class="example-section--pictures" id="ex3">
          <div class="example-section--pictures-pic"><img src="./public/eu-example.jpg"></div>
            <div class="example-section--pictures--overlay"><div class="overlay--text">EE.UU.</div></div>
        </div>
      </div>
      <div class="banner-sesion"></div>
    </div>
  </body>

和我的 css(真的很长)

    *{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}
input{
    border: none;
    border-bottom: 2px solid #74b5fa;
    background-color: rgba(250, 167, 116, 0);
  }
.box-session{
box-sizing: content-box;
  position: relative;
  background-image: linear-gradient(to top left,rgba(152, 116, 250,.1 ), rgba(250, 167, 116, 1));
  width: 232px;
  padding-left: 15px;
  padding-right: 17px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: 11%;
  border-radius: 20px;
  margin-left: calc(50% - 116px);
}
.session{
  box-sizing: border-box;
  position: relative;
  width: 232px;
}
body{
    background-color: #E2EBF8;
    height: 100%;
    width: 100%;
}

.relative{
    position: relative;
    height: 100%;
    width: 100%;
}

.alto20{
    height: 20%;
    width: 100%;
}

.navBar{
    position: fixed;
    height: 100%;
    width: 11%;
    background-color: blue;
    border-radius: 20px;
    background-image: linear-gradient(#71AEFF, #4080FF);
}

.navBar--perfil{
    position: relative;
    float: left;
    /* background-color: yellow; */
}

.navBar--photo{
    position: relative;
    margin-top: 25%;
    /* background-color: blue; */
    width: 100%;
    height: 50%;
}

.navBar--photo img{
    height: 30px;
    width: 30px;
    background-color: #FFFFFF;
    border-radius: 5px;
    margin-left: 40px;
}

.navBar--photo p{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16px;
    padding-left: 26px;
    margin-top: 4px;
}

.navBar--opciones{
    float: left;
    width: 100%;
    height: 60%;
}

.navBar--botones{
    position: relative;
    float: left;
    width: 100%;
    height: calc(100%/5);
}

.navBar--blanco{
    position: relative;
    height: 65px;
    width: 65px;
    /* background-color: green; */
    margin-top: 3.5%;
    margin-left: calc(50% - 52px);
    box-sizing: border-box;
    padding-top: 8px;
}

.navBar--blanco img{
    height: 30px;
    width: 30px;
    margin-left: 19px;
}

.navBar--blanco p{
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}

.selected{
    background-color: #FFFFFF;
    border-radius: 20px;
    color: #71AEFF;
}

.selected p{
    color: #71AEFF;
}

.navBar--ayuda{
    float: left;
    /* background-color: green; */
}

.navBar--ayuda p{
    position: relative;
    background-color: #FFFFFF;
    width: 70px;
    height: 20px;
    border-radius: 7%;
    text-align: center;
    color: #71AEFF;
    font-weight: bold;
    top: 75%;
    left: 15%;
}

.main{
    position: fixed;
    height: 100%;
    width: 55%;
    background-color: #FFFFFF;
    border-radius: 20px;
    margin-left: 8%;
    /* background-color: lightblue; */
}

.main--scroll{
    position: absolute;
    width: 90%;
    /* background-color: pink; */
    float: left;
    overflow-y: scroll;
    height: 95%;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 2.5%;
    margin-left: 2.5%;
}

.lista ul{
    float: left;
    /* list-style-type: upper-roman; */
    list-style-position: inside;
    list-style-image: url('../public/man.png');
}

.tabla table{
    border: 2px solid red;
    border-collapse: separate;
}

.derecha{
    position: fixed;
    height: 100%;
    width: 40%;
    margin-left: 60%;
    border-radius: 20px;
    background-image: linear-gradient(#F3FAFC, #CCDBEF);
}

.ej{
    background-color: greenyellow;
    width: 100%;
    height: 200px;
    border: 1px solid black;
}

.noteblock{
  width: 150px;
  height: 150px;
  background-color: #ff7190;
  border-radius: 20px;
  margin-left: 20px;
  margin-top: 20px;
  padding-top: 10px;
  padding-left: 10px;
  position: relative;
  float: left;
}
.noteblock p{
  color: white;
}
.noteblock h3{
  color: white;
}
.boton{
  margin-left: 20px;
  margin-top: 20px;
  position: relative;
}

感谢大家的耐心等待

最佳答案

我想你可能误解了fixed position。事实上，您可以在您的站点中完美地添加更多内容:尝试设置 .new { height: 2000px; background: orange;}你会看到橙色的墙确实出现了，而且网站滚动了。可能误导您的一件事是因为您的 header 也是固定的，所以您添加的任何内容(例如 <h1>)都将放在它下面。

在任何情况下，因为横幅是固定的，它们的位置相对于屏幕，所以它们会在您滚动时“向下”，并且它们将位于您添加的任何内容的前面.

我不明白是什么促使您首先将它们设置为固定的，但这可能不是一个好主意。试着把它去掉，给 ejemplo 图片一个固定的高度并让它滚动(尝试将标题设置为粘性而不是固定)。完成作业后，try researching CSS positions a bit more .

关于html - 如何使固定元素在 100% 的主体后滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59121520/

26 4 0
文章推荐： c++ - 从 std::multimap 删除元素时的特殊行为
文章推荐： javascript - D3 - 为数据集中的每个条目创建多个圆圈元素
文章推荐： 由于指针和函数的交互导致的 C++ 错误
文章推荐： javascript - 如果其他对象名称/键不断变化但要访问的对象名称/键保持不变，如何访问 Wikipedia API 中的对象？
行者123
个人简介

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

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