Question

当调整屏幕大小时，文本会变为另一个大小。我不想避免这种情况并显示滚动条。请问你能帮帮我吗？

这是我的代码：

＆＃13;

article {
  width: 100%;
  height: 100%;
}

section.apropos {
  background-color: white;
  color: #666666;
  font-family: Calibri;
  height: 100%;
  width: auto;
  padding-top: 95px;
  padding-left: 20%;
  padding-right: 20%;
  text-align: justify;
  min-width: auto;
  min-height: auto;
}

＆＃13;

<header>
  <nav>
    <ul>
      <li><a> Notre entreprise</a></li>
      <li class="m"><a> Nous connaitre</a></li>
      <li class="m"><a onclick='onLinkClick()'>Nos métiers</a></li>
      <li class="m"><a>Nous contacter</a></li>
    </ul>
  </nav>
</header>

<body>
  <article>

    <section class="apropos">
      <h1> A PROPOS DE NOUS </h1> <br/>
      <p> Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur</p>

      <p> Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur</p>
    </section>

    <section class="NotreMetier" id="NotreMetier">

    </section>

  </article>
</body>

＆＃13;

提前致谢。

Answer 1

使用width:和height:将其修复（在我的示例中为400px和300px）。如果内容大于其大小，可以选择使用overflow: scroll;为元素滚动条提供。

＆＃13;

article {
  width: 400px;
  height: 300px;
  overflow: scroll;
}

section.apropos {
  background-color: white;
  color: #666666;
  font-family: Calibri;
  width: auto;
  padding-top: 95px;
  padding-left: 20%;
  padding-right: 20%;
  text-align: justify;
}

＆＃13;

<body>
<header>
  <nav>
    <ul>
      <li><a> Notre entreprise</a></li>
      <li class="m"><a> Nous connaitre</a></li>
      <li class="m"><a onclick='onLinkClick()'>Nos métiers</a></li>
      <li class="m"><a>Nous contacter</a></li>
    </ul>
  </nav>
</header>
  <article>

    <section class="apropos">
      <h1> A PROPOS DE NOUS </h1> <br/>
      <p> Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur</p>

      <p> Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur</p>
    </section>

    <section class="NotreMetier" id="NotreMetier">

    </section>

  </article>
</body>

＆＃13;

避免在调整屏幕大小时调整节大小

1 个答案: