只有中间部分应滚动，左＆amp＆amp＆amp;应修复页面的顶部

发布于 2025-02-10 03:14:34 字数 945 浏览 1 评论 0原文

我最近开始学习编程，也许有人可以帮助我？请 我的问题是：我想编写一个网站，在该网站上仅滚动，顶部，左侧和右侧仍保持到位。是否可以这样做不是很复杂？网页示例： https://dominos.ua/uk/kyiv/ 该页面已修复） https://news.google.com/ （页面的顶部 +页面的左侧固定）另外，这是我到目前为止的代码（也许可以帮助）：

 .middlepane {
    width: 50%;
    height: 100%;
    float: left;
    background-color: #c6e5f3;
    border-collapse: collapse;
  }

  .rightpane {
    width: 25%;
    height: 100%;
    float: right;
    background-color: #084a83;
    border-collapse: collapse;
  }

  .toppane {
    width: 100%;
    height: 100px;
    border-collapse: collapse;
    background-color: #ffffe7;
    align-items: center;
  }
 
 .leftpane {
    width: 25%;
    height: 100%;
    float: left;
    background-color: #084a83;
    border-collapse: collapse;

原文

I have recently started to learn programming, maybe someone can help me? Please
My problem: I would like to write a website where only the middle part of the site is scrolling and the top, left and right sides remain in place. Is it possible to do this not very complicated?
Web-page examples: https://dominos.ua/uk/kyiv/ (the top of the page is fixed)
https://news.google.com/ (the top of the page + the left side of the page are fixed)
Also, here is my code so far (maybe it can help):

 .middlepane {
    width: 50%;
    height: 100%;
    float: left;
    background-color: #c6e5f3;
    border-collapse: collapse;
  }

  .rightpane {
    width: 25%;
    height: 100%;
    float: right;
    background-color: #084a83;
    border-collapse: collapse;
  }

  .toppane {
    width: 100%;
    height: 100px;
    border-collapse: collapse;
    background-color: #ffffe7;
    align-items: center;
  }
 
 .leftpane {
    width: 25%;
    height: 100%;
    float: left;
    background-color: #084a83;
    border-collapse: collapse;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蒲公英的约定 2025-02-17 03:14:34

我会建议学习如何使用Flexbox。这是如何做。

body {
  overflow: hidden;
  height: 100vh;
}
main {
  overflow-y: auto;
}
ul {
  list-style: none;
}
li {
  color: #fff;
}
aside {
  border-right:  1px solid #ededed;
  background: #36c;
  flex: 1 0 10%;
  padding: 1rem;
}
.wrapper {
  display: flex;
  height: 100%;
}
@media (max-width: 500px) {
  .wrapper {
    flex-direction: column-reverse;
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
}
.wrapper_inner {
  width: 90%;
  margin: 0px auto;
}

<body>
<div class="wrapper">
  <aside>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </aside>
  <main>
    <div class="wrapper_inner">
      <p>

Non enim praesent elementum facilisis. Facilisis volutpat est velit egestas dui id ornare. Lobortis mattis aliquam faucibus purus. Volutpat consequat mauris nunc congue nisi vitae. Quis auctor elit sed vulputate. Nisl nisi scelerisque eu ultrices vitae auctor eu. Imperdiet sed euismod nisi porta lorem. Sed faucibus turpis in eu mi bibendum neque. Id eu nisl nunc mi. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan.

Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
       Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
        Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
       Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
      </p>
      <p>
        Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
       Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
        Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
       Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
      </p>
    </div>
  </main>
    <aside>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </aside>
</div>
</body>

I would advice learning how to use flexbox. Here's an article that explains how to do it.

body {
  overflow: hidden;
  height: 100vh;
}
main {
  overflow-y: auto;
}
ul {
  list-style: none;
}
li {
  color: #fff;
}
aside {
  border-right:  1px solid #ededed;
  background: #36c;
  flex: 1 0 10%;
  padding: 1rem;
}
.wrapper {
  display: flex;
  height: 100%;
}
@media (max-width: 500px) {
  .wrapper {
    flex-direction: column-reverse;
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
}
.wrapper_inner {
  width: 90%;
  margin: 0px auto;
}

<body>
<div class="wrapper">
  <aside>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </aside>
  <main>
    <div class="wrapper_inner">
      <p>

Non enim praesent elementum facilisis. Facilisis volutpat est velit egestas dui id ornare. Lobortis mattis aliquam faucibus purus. Volutpat consequat mauris nunc congue nisi vitae. Quis auctor elit sed vulputate. Nisl nisi scelerisque eu ultrices vitae auctor eu. Imperdiet sed euismod nisi porta lorem. Sed faucibus turpis in eu mi bibendum neque. Id eu nisl nunc mi. At erat pellentesque adipiscing commodo elit at imperdiet dui accumsan.

Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
       Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
        Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
       Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
      </p>
      <p>
        Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
       Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
        Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
       Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Facilisis mauris sit amet massa vitae. Mauris a diam maecenas sed enim ut sem. Libero id faucibus nisl tincidunt. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Integer enim neque volutpat ac. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Dolor sed viverra ipsum nunc aliquet bibendum. Nunc vel risus commodo viverra maecenas. Id velit ut tortor pretium viverra suspendisse potenti nullam. Maecenas sed enim ut sem viverra aliquet. Faucibus turpis in eu mi bibendum neque egestas congue. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Mattis nunc sed blandit libero. Quam pellentesque nec nam aliquam sem et tortor.
      </p>
    </div>
  </main>
    <aside>
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </aside>
</div>
</body>

回复收藏 0 原文

~没有更多了~