在调整屏幕大小时避免调整部分大小答案

【问题标题】：Avoid resize a section while resizing the screen在调整屏幕大小时避免调整部分大小
【发布时间】：2018-04-30 14:30:32
【问题描述】：

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

这是我的代码：

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;
}

<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>

提前致谢。

【问题讨论】：

3 次对不起我的英语？如果 SO 告诉您添加更多“文本”，您应该澄清您的问题，而不是一遍又一遍地发布相同的文本以使代码适合文本配给 ...
只需使用固定宽度

标签： css resize screen

【解决方案1】：

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

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;
}

<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>

【讨论】：