主页 / coding / 问题 / 78747457
Accepted
Display name
Asked: 2024-07-15 05:11:48 +0800 CST

显示滚动条并让其在弹性框子项中发挥作用

  • 772

导航栏现在很小，但会变大很多。所以，它需要滚动条。但是，如果不使用 overflow: scroll; 强制显示，我似乎无法让它们显示出来。但即使这样也行不通，因为滚动条不起作用。

我尝试将 overflow: hidden、clip、no-warp 添加到各种类，并将 overflow: scroll 添加到各种父元素。

DOM 是从 blazor 应用程序生成的，提取了相关的元素和样式。结果显示了我遇到的问题。我添加了边框以确保各种元素占据了整个视口。

更新答案：参见 css 注释“魔法在这里发生”。为了使滚动条按预期显示，需要某种高度来固定导航栏的长度。

body {
  padding: 0;
  margin: 0;
  font: bold 16px Garamond, serif;
  background: black;
  color: white;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.view {
  flex: 1 1 100%;
  border: solid 1px red;
}

.navbar {
  flex: 0 0;
  border: solid 1px yellow;
  align-content: start;
}
nav {
  white-space: nowrap;
  padding: 0;
  color: grey;
/* magic happens here */
  height: 100%;
  overflow: auto;
/* magic happens here */
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: auto;
}
<html lang="en">
  <head>
  </head>
  <body>
<div class="wrapper">
  <div class="navbar">
    <nav >
      <ul >
        <li >Home Sweet Home</li>
        <li >Adventure Log</li>
        <li >Rules</li>
        <li >Maps</li>
        <li >Characters</li>
      </ul>
    </nav>
  </div>
  <div class="view">
    <div>Hello, world!</div>
    <div>Welcome to your new app.</div>
  </div>
</div>
  </body>
</html>

html

2 个回答

  1. Best Answer

    基本上，您需要为元素添加高度，nav以便它显示出来。我猜您的高度应该是 100vh。然后，一旦项目溢出，滚动条就会出现。

    body {
  padding: 0;
  margin: 0;
  font: bold 16px Garamond, serif;
  background: black;
  color: white;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.view {
  flex: 1 1 100%;
  border: solid 1px red;
}

.navbar {
  flex: 0 0;
  border: solid 1px yellow;
  align-content: start;
}
nav {
  white-space: nowrap;
  padding: 0;
  color: grey;
  /* I added the following four lines */
  height: 10vh; 
  overflow-y: auto;
  overflow-x: hidden;
  background: red;
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
    <html lang="en">
  <head>
  </head>
  <body>
<div class="wrapper">
  <div class="navbar">
    <nav >
      <ul >
        <li >Home Sweet Home</li>
        <li >Adventure Log</li>
        <li >Rules</li>
        <li >Maps</li>
        <li >Characters</li>
      </ul>
    </nav>
  </div>
  <div class="view">
    <div>Hello, world!</div>
    <div>Welcome to your new app.</div>
  </div>
</div>
  </body>
</html>

    • 2

  2. 当项目溢出时，您可以使用滚动条

    .wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.view {
  width:60%;
  border: solid 1px;
}

.navbar {
width:300px;
  border: solid 1px yellow;
  align-content: start;
}
nav {
  color: grey;
  height: 100px; 
    overflow:scroll;
  
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
    <div class="wrapper">
  <div class="navbar">
    <nav >
      <ul >
        <li >Menu 1</li>
        <li >Menu 2</li>
        <li >Menu 3</li>
        <li >Menu 4</li>
        <li >Menu 5</li>
        <li >Menu 6</li>
        <li >Menu 7</li>
        </ul>
    </nav>
  </div>
  <div class="view">
    <div>Hello, world!</div>
  </div>
</div>

    • 0

相关问题