0

ここで問題を説明するのは難しいかもしれませんが、これはまだ新しいことです。

コンテンツの長さに応じてスクロールバーがあるID「コンテンツ」のdivがあります。これは、ID「contentArea」を持つ別の div 内にあります。ここで、contentArea div を固定サイズにしたいので、contentArea サイズよりも大きい場合、コンテンツ div をスクロール可能にすることはできません。

私のコードでは、ブラウザー ウィンドウがフル サイズまたは特定のサイズの場合は問題ないように見えるかもしれませんが、小さいほど、contentArea div は h1 を超えてスクロールでき、その中にスクロール可能なダイブがあります。したがって、次のようなものが得られます。

ここに画像の説明を入力 スクロール可能なdivの外側をクリックすると、他のdivをスクロールでき、ロゴ領域を通り過ぎますが、これは私が望んでいるものではありません。内部の div のみをスクロール可能にしたい。

本当に私が欲しいのは、私のワイヤーフレームで次のようなものです: ここに画像の説明を入力

ボックス内はスクロール可能で、ロゴ領域の下に隠れます。これが、2 つの div があった理由です。1 つは、固定位置で特定のサイズの div 内でスクロール可能です。私は友人にそれを見てもらい、彼はcssにいくつかの変更を加えました。そのうちの1つはcontentAreaの50％の高さでした.ロゴ領域を越えてスクロールできます。

ここで何が間違っていますか？また、この結果を達成するためのより良い方法はありますか? おそらく、ある div を別の div の中に入れる必要はないのではないでしょうか?

    html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  color: #ffffff;
  background-image: linear-gradient(45deg, #3a3a3a 50%, #1b1b1b 100%);
}

body::-webkit-scrollbar {
  width: 0px;
}

@font-face {
  font-family: Eina01Regular;
  src: url(/fonts/Eina01-Regular.ttf);
  font-weight: normal;
}

@font-face {
  font-family: Eina01SemiBold;
  src: url(/fonts/Eina01-SemiBold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: Eina01Bold;
  src: url(/fonts/Eina01-Bold.ttf);
  font-weight: bolder;
}
/* Use this for image background */
/* @media (max-width: 7680px) {
  body {
    background: url(/background.jpg) no-repeat center center fixed;
    background-size: cover;
    resize: both;
    overflow: scroll;
    overflow-x: hidden;
  }
} */
h1{
  font-size: 60px;
}
#topBar {
  background-color: #ffffff;
  height: 61px;
  top: 0;
  position: sticky;
  /* box-shadow: 0px 2px 15px #000000; */
}

#nav {
  float: right;
  margin-right: 198px;
}
#navLinks {
  font-family: Eina01SemiBold;
  font-size: 15pt;
  color: #707070;
  margin-top: 20px;
  margin-bottom: 20px;
}

#navLinks li {
  display: inline;
  margin-right: 80px;
}

#navLinks a {
  color: #707070;
  text-decoration: none;
}

#navLinks a:hover {
  color: #9b9b9b;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#logoArea {
  margin-top: 20px;
  margin-left: 130px;
  position: fixed;
}
/* Transition effects from swup */
.transition-fade {
  opacity: 1;
  transition: 150ms;
  transform: translateX(0);
  transform-origin: left;
}

html.is-animating .transition-fade {
  opacity: 1;
  transform: translateY(100%);
}

html.is-leaving .transition-fade {
  opacity: 0;
  transform: translateY(0);
}

/* End of transition effects from swup */

#contentArea {
  margin-top: 200px;
  margin-bottom: 130px;
  margin-left: 130px;
  margin-right: 130px;
  position: fixed;
  height: 50%;
  position: relative;
}

#content {
  overflow: auto;
  height: 100%;
  position: absolute;
}

#content::-webkit-scrollbar {
  width: 5px;
}

#content::-webkit-scrollbar-track {
  background: black;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  background-clip: padding-box;
}

#content::-webkit-scrollbar-thumb {
  background: #000000;
}

#bottomBar {
  background-color: white;
  position: fixed;
  height: 61px;
  left: 0;
  right: 0;
  bottom: 0;
}

#footerContent {
  margin-left: 130px;
  margin-top: 20px;
  position: fixed;
}
    <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script defer src="node_modules/swup/dist/swup.min.js"></script>
    <script defer src="script.js"></script>
    <title>Living Dreams - Projects</title>
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="stylesheet.css" />
  </head>

  <body>
    <div id="topBar">
      <div id="nav">
        <ul id="navLinks">
          <li><a href="/index.html">Home</a></li>
          <li><a href="/projects.html">Projects</a></li>
          <li><a href="/about.html">About</a></li>
          <li><a href="/contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
    <div id="logoArea">
      <img src="/logo.png" />
    </div>
    <div id="swup" class="transition-fade">
      <div id="contentArea">
        <div id="content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            ullamcorper lacus elit, nec dictum lacus aliquet vitae. Pellentesque
            habitant morbi tristique senectus et netus et malesuada fames ac
            turpis egestas. Morbi tincidunt diam ut purus consequat tempor. Sed
            vitae nisi ut ipsum gravida scelerisque. Aliquam vitae tortor sit
            amet diam facilisis euismod quis non arcu. Aenean gravida arcu mi,
            at eleifend libero volutpat id. Donec imperdiet erat ac felis
            tempor, sed hendrerit nunc hendrerit. Vestibulum metus felis,
            bibendum nec faucibus in, fermentum nec lacus.
          </p>
          <br />
          <p>
            Vestibulum viverra, neque ut maximus sollicitudin, risus mi mattis
            odio, ut luctus erat augue quis nunc. Nam quis blandit lacus.
            Vivamus orci arcu, lobortis placerat mi ac, porta mattis diam.
            Aliquam quis efficitur neque, in euismod ipsum. Ut dictum mattis
            ante, vitae tincidunt massa interdum eu. Aenean vitae arcu ut lectus
            rhoncus ornare et et erat. Suspendisse iaculis euismod ante, eget
            accumsan nunc. Morbi euismod magna in euismod viverra. Phasellus
            ullamcorper ipsum quis lacus cursus dictum. Quisque mollis fringilla
            ultrices. Curabitur in elit odio.
          </p>
          <br />
          <p>
            Aenean vestibulum lacus et lorem faucibus, vitae pretium quam porta.
            Curabitur posuere erat eu interdum consequat. Aenean at semper est.
            Nullam at molestie turpis, ac luctus lorem. Etiam magna risus,
            vehicula in consectetur id, sagittis id mauris. Quisque enim lorem,
            ullamcorper sed maximus sit amet, suscipit eu mauris. Donec ac
            tempor ligula, eget semper neque. Etiam lacinia felis at nulla
            iaculis rhoncus.
          </p>
          <br />
          <p>
            Duis luctus risus eu interdum euismod. Vivamus ut nulla id ante
            pulvinar condimentum. Donec facilisis leo at sollicitudin vulputate.
            Suspendisse placerat, enim et congue pharetra, dolor eros ultricies
            velit, vitae pellentesque justo eros ut velit. Pellentesque habitant
            morbi tristique senectus et netus et malesuada fames ac turpis
            egestas. Ut nec lorem rhoncus, ornare odio ut, egestas urna. Quisque
            rutrum sit amet velit vel tristique. Aenean in condimentum diam.
            Fusce vitae orci eros. Pellentesque consequat dapibus aliquam. Fusce
            sit amet sapien lacus. Sed dui neque, cursus non nunc id, aliquam
            condimentum ligula. Phasellus sed sagittis ex. Integer facilisis
            nisi lacus, vitae fermentum lacus sagittis non.
          </p>
          <br />
          <p>
            Fusce eleifend mauris non ex convallis, ut tincidunt ligula laoreet.
            Nulla tristique nisi scelerisque scelerisque pretium. Vestibulum
            bibendum odio at eleifend semper. Praesent sit amet tortor
            facilisis, interdum lacus ut, condimentum tellus. Nunc risus mi,
            varius a interdum sit amet, facilisis quis felis. Phasellus molestie
            eros tortor, ut venenatis orci molestie eget. Suspendisse potenti.
            Nulla id rhoncus nisi. Curabitur pretium tincidunt ipsum at egestas.
            Integer maximus diam vitae turpis viverra, ut volutpat odio
            molestie. Mauris et pretium tortor. Nam sapien sem, feugiat non
            lectus a, interdum faucibus eros. Quisque eget nisl ultricies, porta
            eros sit amet, congue metus.
          </p>
        </div>
      </div>
    </div>
    <div id="bottomBar">
      <div id="footerContent">
        <a href="https://www.linkedin.com/in/49030813/" target="_blank"
          ><img src="linkedin.png"
        /></a>
        <a href=""><img src="behance.png" /></a>
      </div>
    </div>
  </body>
</html>

更新: contentArea div なしでコンテンツ div を使用しようとしましたが、残念ながら、それもうまくいきませんでした。これは私が立ち往生しています。これは代わりにiframeにあるはずですか？最近でもiframeを使用していますか、それとも嫌われているだけですか? 今日の基準で理想的な方法でそれをやろうとしているだけです。考え？

4

1 に答える 1

0

これが理想的な方法であるかどうかはわかりませんが、これに興味のある他の人にとっては...

そのため、contentArea の高さのほとんどは 50% で、他のすべての div はマージン、配置などに正確なピクセル数を使用していました。正確なピクセル値ではなく、すべてのパーセンテージにすることで、問題が修正されました。

于 2021-04-21T22:47:36.410 に答える