HTML / CSS两层布局，可单独滚动

n3schb8v 于 2023-01-22 发布在其他

关注(0)|答案(3)|浏览(143)

大家好，
我正在寻找建立这样一个布局，但我挣扎着找到正确的方式来做到这一点。我已经发挥了两个div与位置=绝对，但它并不符合我的所有要求。任何建议如何得到顶部导航以及一个固定的子导航在右边的面板？

html {
  width: 100%;
  height: 100%;
}

#leftCol {
  background: #ddd;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 80%;
  overflow: auto;
  padding: 2em;
  font-size: 16px;
}

#rightCol {
  background: #bbb;
  position: absolute;
  left: 20%;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: auto;
  padding: 2em;
  font-size: 66px;
}

<body style="padding: 0; margin: 0;">

  <div>test</div>

  <div id="leftCol">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a semidunt rhoncus auctor.</p>

  </div>
  <div id="rightCol">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a sem. Vestibulum tempus velit
      vel neque rutrum congue. Donec vehicula dictum mi, sit amet suscipit augue rhoncus vitae. Curabitur tempus auctor bibendum. Sed sodales iaculis egestas. Suspendisse consectetur elementum ligula et imperdiet. Proin in velit eu arcu dapibus faucibus.
      Vivamus fringilla adipiscing mauris ac condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ut nibh ac nulla tempus malesuada. Ut congue, arcu quis semper pellentesque, nunc quam
      volutpat libero, a rhoncus metus sem eu dolor. Vestibulum lacinia augue sit amet nibh imperdiet eu volutpat nibh egestas. Suspendisse luctus laoreet mattis. Proin in euismod augue. Duis tincidunt rhoncus auctor.</p>

  </div>

</body>

谢谢! fj

css

来源：https://stackoverflow.com/questions/75172498/html-css-two-layered-layout-separately-scrollable

3条答案

按热度按时间

vfh0ocws1#

我是grid-template-areas的粉丝，请看下面：

body {
  margin:0;
  height: 100vh;
  display: grid;
  grid-template-areas: 
    "nav nav"
    "sidebar subnav"
    "sidebar main"
    ;
  grid-template-rows: fit-content(2rem) fit-content(2rem) 1fr;
  grid-template-columns: 10rem 1fr;
}

nav {
  background-color: #4472C4;
  grid-area: nav;
  display: flex;
}

nav .spacer {
  flex-grow:2;
}

.nav-item, .subnav-item {
  padding: 0.5rem 0.25rem;
}

aside {
  position: relative;
  background-color: #ED7D31;
  grid-area: sidebar;
  padding: 0.25rem;
}

.aside-scrollable {
  position: absolute;
  inset: 0;
  overflow-y:auto;
  
}

.subnav {
  background-color: #00B050;
  grid-area: subnav; 
  display: flex;
}

main {
  background-color: #A9D18E;
  grid-area: main; 
  height: 100%;
  overflow-y: scroll;
}

<nav>
  <div class='nav-item'>Left-side icon (fixed)</div>
  <div class='spacer'></div>
  <div class='nav-item'>Item 1</div>
  <div class='nav-item'>Item 2</div>
<div class='nav-item'>Item 3</div>
</nav>
<aside>
  <div class='aside-scrollable'>
    Left side scrollable
  </div>
    </aside>
<div class='subnav'>
  <div class='subnav-item'>Item 1</div>
  <div class='subnav-item'>Item 2</div>
  <div class='subnav-item'>Item 3</div>
  <div class='subnav-item'>Item 4</div>
  <div class='subnav-item'>Item 5</div>
</div>
<main>
  Some content here
</main>

赞(0）回复(0）举报 2023-01-22

yfjy0ee72#

你需要一个固定高度的滚动项目，你需要你的垂直溢出集滚动。
反正我就是这么做的：

.createForm form {
    height: 80vh !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    margin-bottom: 50px;
}

希望这有帮助！

赞(0）回复(0）举报 2023-01-22

rslzwgfq3#

我会使用flex作为主布局，然后使用绝对定位元素作为滚动区：

- 基本布局**

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

header {
  background: blue;
}

main {
  flex-grow: 1;
  display: flex;
}

nav {
  width: 200px;
  background: orange;
}

.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.content-header {
  background: green;
}
.content-body {
  flex-grow: 1;
  background: lightgreen;
}

.scroll-container {
  position: relative;
}

.scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

<header>header</header>
<main>
  <nav class="scroll-container">
    <div class="scroll">nav</div>
  </nav>
  <div class="content">
    <div class="content-header">content header</div>
    <div class="content-body scroll-container">
      <div class="scroll">content body</div>
    </div>
  </div>
</main>

- 有足够的内容滚动**

一个二个一个一个

赞(0）回复(0）举报 2023-01-22

我来回答

HTML / CSS两层布局，可单独滚动

3条答案

相关问题

热门标签

最新问答