如何删除底部滚动?

时间:2022-08-24 23:48:40

please help solve the problem.

请帮忙解决问题。

there is a page fiddle. If you compress it to the width(width < 420px), the bottom scrolling appears. and it should not be because it makes the bootstrap adaptive layout:

有一页小提琴。如果将其压缩到宽度(宽度<420px),则会显示底部滚动。它不应该是因为它使引导自适应布局:

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 110px;
  text-align: center;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 110px;
  background-color: #fff;
}

body > .appointment_mobile > .container {
  padding: 0px 15px 0;
}

please help remove the lower scrolling.

请帮助删除下部滚动。

4 个解决方案

#1


Be careful when adding padding:0 to your container. You'll break the Bootstrap logic and create that unnecessary margin.

添加填充时要小心:0到容器。您将打破Bootstrap逻辑并创建不必要的边距。

This code is better if you just want to hide the top & bottom paddings.

如果您只想隐藏顶部和底部填充,则此代码更好。

body > .appointment_mobile > .container.menu_area {
    padding-top:0;
    padding-bottom:0;
}
.footer > .container.footer_area {
    padding-top:0;
    padding-bottom:0;
}

TL;DR you shouldn't do any left & right padding modification in the container class.

TL; DR你不应该在容器类中进行任何左右填充修改。

#2


you can use

您可以使用

body {
    overflow-x: hidden;
}

but actual problem is being caused by bootstrap.css:1606. which you can also override in your css (only for width < 480px)

但实际问题是由bootstrap.css引起的:1606。你也可以在你的CSS中覆盖(仅适用于宽度<480px)

.row {
   margin-right: -15px;
   margin-left: -15px;
}

#3


EDIT : You used to many .container class, when you use only one or two, it solves your problem.

编辑:您曾经使用过很多.container类,当您只使用一两个时,它可以解决您的问题。

<div class="container">
  <div class="row">...</div>
  <div class="row">...</div>
</div>

You can also see this answer: horizontal scrollbar appearing, row having negative margin

你也可以看到这个答案:水平滚动条出现,行有负边距

Here is a fiddle working: http://jsfiddle.net/52VtD/11250/

这是一个小提琴工作:http://jsfiddle.net/52VtD/11250/

Hope it helps :)

希望能帮助到你 :)

#4


.container > .row {
    margin-left: 0;
    margin-right: 0;
}

http://jsfiddle.net/52VtD/11248/

#1


Be careful when adding padding:0 to your container. You'll break the Bootstrap logic and create that unnecessary margin.

添加填充时要小心:0到容器。您将打破Bootstrap逻辑并创建不必要的边距。

This code is better if you just want to hide the top & bottom paddings.

如果您只想隐藏顶部和底部填充,则此代码更好。

body > .appointment_mobile > .container.menu_area {
    padding-top:0;
    padding-bottom:0;
}
.footer > .container.footer_area {
    padding-top:0;
    padding-bottom:0;
}

TL;DR you shouldn't do any left & right padding modification in the container class.

TL; DR你不应该在容器类中进行任何左右填充修改。

#2


you can use

您可以使用

body {
    overflow-x: hidden;
}

but actual problem is being caused by bootstrap.css:1606. which you can also override in your css (only for width < 480px)

但实际问题是由bootstrap.css引起的:1606。你也可以在你的CSS中覆盖(仅适用于宽度<480px)

.row {
   margin-right: -15px;
   margin-left: -15px;
}

#3


EDIT : You used to many .container class, when you use only one or two, it solves your problem.

编辑:您曾经使用过很多.container类,当您只使用一两个时,它可以解决您的问题。

<div class="container">
  <div class="row">...</div>
  <div class="row">...</div>
</div>

You can also see this answer: horizontal scrollbar appearing, row having negative margin

你也可以看到这个答案:水平滚动条出现,行有负边距

Here is a fiddle working: http://jsfiddle.net/52VtD/11250/

这是一个小提琴工作:http://jsfiddle.net/52VtD/11250/

Hope it helps :)

希望能帮助到你 :)

#4


.container > .row {
    margin-left: 0;
    margin-right: 0;
}

http://jsfiddle.net/52VtD/11248/