主页 / 问题 / 1282680
Accepted
Denis
Asked:2022-05-17 03:18:51 +0000 UTC2022-05-17 03:18:51 +0000 UTC

水平滚动时背景被切断

  • 772

有这样一张图

在此处输入图像描述

body {
  background: #ffffff;
}

.wrapper {
  position: relative;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
}

header {
  flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  position: relative;
  z-index: 4;
}

.content {
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}

footer {
  flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
}

.row {
  width: 100%;
  max-width: 1920px;
  min-width: 1600px;
  margin: 0 auto;
  padding: 0 25px;
}

.main_page {
  background-color: #d40c0c;
  background-size: cover;
  background-image: url(img/dots_bg.png);
}
<div class="wrapper main_page">
  <header>
    header
  </header>
  <div class="content">
    <section>
      <div class="row">class="row"</div>
    </section>
  </div>
  <footer class="footer_section">
    class="footer_section"
  </footer>
</div>

水平滚动时如何防止背景被切断？

html

4 个回答

  1. .row {
    width: 100%;
    max-width: 1920px;
    min-width: 1600px; // <-- у вас задана минимальная ширина слишком большая
    margin: 0 auto;
    padding: 0 25px;
}
    • 2
  2. Best Answer
    html {
    min-width: 1550px !important;
}

    我不得不这么做

    • 2 
  3. min-width: 1600px;

    显然太多了。并且.wrapper你可以添加一个属性overflow:hidden;

    • 1 

  4. body {
  background: #ffffff;
}

.wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-height: 100%;
}

header {
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
}

.content {
  flex: 1 0 auto;
}

footer {
  flex: 0 0 auto;
}

.row {
  max-width: 1920px;
  min-width: 1600px;
  margin: 0 auto;
  padding: 0 25px;
}

.main_page {
  background-color: #d40c0c;
  background-size: cover;
  background-image: url(http://via.placeholder.com/250x250/33ff99/555555?text=foto);
}
    <div class="wrapper main_page">
  <header>
    header
  </header>
  <div class="content">
    <section>
      <div class="row">class="row"</div>
    </section>
  </div>
  <footer class="footer_section">
    class="footer_section"
  </footer>
</div>

    • 1

相关问题