Question

我将尝试创建一个滑块（向左或向右移动），但是当我将外部容器（.wrapper）宽度设置为100vw并将每个子div设置为100vh时，它会在垂直方向溢出，我该如何避免呢？

Open the detailed description of the picture

＆＃13;

body{
  padding : 0;
  margin:0;
}
.wrapper {
  width : 200vw;  
}

.section {
  width : 100vw;
  height : 100vh;
  position:relative;
  float:left;
}

.section1 {
  background-color : red;
}

.section2{
  background-color : yellow;
}

＆＃13;

<div class="wrapper">
  <div class="section section1">1</div>
  <div class="section section2">2</div>
</div>

＆＃13;

if you want to edit with online editor, you can try it

我不知道为什么当我只有一个孩子div（.section）时，身高不会垂直溢出（向上和向下移动）

＆＃13;

body{
  padding : 0;
  margin:0;
}
.wrapper {
  width : 100vw;  
}

.section {
  width : 100vw;
  height : 100vh;
  position:relative;
  float:left;
}

.section1 {
  background-color : red;
}
/*
.section2 {
  background-color : yellow;
}
*/

＆＃13;

<div class="wrapper">
  <div class="section section1">1</div>
  <!--<div class="section section1">1</div>-->
</div>

＆＃13;

Answer 1

虽然您的问题是说您要隐藏水平滚动条（左右），但您的图片表明您实际上想要隐藏垂直< / strong>滚动条（向上和向下）。

您希望将{strong> overflow-y: hidden 添加到body以隐藏垂直滚动条：

＆＃13;

body {
  padding: 0;
  margin: 0;
  overflow-y: hidden;
}

.wrapper {
  width: 200vw;
}

.section {
  width: 100vw;
  height: 100vh;
  position: relative;
  float: left;
}

.section1 {
  background-color: red;
}

.section2 {
  background-color: yellow;
}

＆＃13;

<div class="wrapper">
  <div class="section section1">1</div>
  <div class="section section2">2</div>
</div>

＆＃13;

或者，如果您确实要隐藏水平滚动条，可以使用 overflow-x: hidden 来完成，但请注意您的内容已赢得＆＃39;实际上太高了，不能垂直移除边界，水平滚动条被移除。设置110vh的高度表明这有效：

＆＃13;

body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.wrapper {
  width: 200vw;
}

.section {
  width: 100vw;
  height: 110vh;
  position: relative;
  float: left;
}

.section1 {
  background-color: red;
}

.section2 {
  background-color: yellow;
}

＆＃13;

<div class="wrapper">
  <div class="section section1">1</div>
  <div class="section section2">2</div>
</div>

＆＃13;

希望这有帮助！：）

如何避免水平滑块布局中的垂直滚动条

1 个答案: