主页 / 问题 / 1564221
Accepted
BlackStar1991
Asked:2024-02-01 04:42:03 +0000 UTC2024-02-01 04:42:03 +0000 UTC

CSS 如何制作水平滚动的全屏部分？

  • 772

有这么一个原始的html/css

body {
  margin: 0;
}

.main {
  display: flex;
  overflow-x: auto;
}

.main_section {
  background-color: #f00;
  width: 100%;
  height: 100vh;
}

.main_video {
  background-color: #ff0;
  width: 200%;
  height: 100vh;
}
<main class="main">
  <div class="main_section">

  </div>
  <div class="main_video">

  </div>
</main>

如何使该部分main_section占据屏幕的整个宽度，并且该对象本身.main可以水平滚动，但不添加垂直滚动。我试图重复这个例子中的黑客行为。但出了点问题。.main_section {min-width:100vw;}如果我对机器人的质量不满意（不滚动），它就可以工作。

css

1 个回答

  1. Best Answer

    如果我正确理解你的要求，那就是：

    body {
    white-space: nowrap;
    width: 5000px;
    height: 100vh;
    margin: 0;
    overflow-y: hidden;
}

.main {
    display: flex;
    overflow-x: scroll;
    height: 100vh;
}

.main_section {
    background-color: #f00;
    width: 1000px;
    height: 100%;
}

.main_video {
    background-color: #ff0;
    width: 5000px;
    height: 100%;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="test.css">
</head>
<body>
<main class="main">
  <div class="main_section">

  </div>
  <div class="main_video">

  </div>
</main>
</body>
</html>

    我设置了宽度以显示水平滚动

    • 0

相关问题