没有 mediaqueries 或 flexbox 有可能使响应式网站 100% 吗？

Question

我想知道是否可以创建一个没有 flexbox 或媒体查询的 100% 响应的网站。我放弃了使用位置、宽度、高度和像素的可能性。我试过使用百分比 %、边距、填充和列数，但没有达到 100%。如您所见，对于某些分辨率（如 1440 x 629），框限制了高度并且文本发生了变化。如何在没有媒体查询或 flexbox 的情况下修复它？

body {
  background-color: #fff;
}
main {
  background-color: #000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 3%;
}
main > * {
  color: #fff;
}
section.navigation-bar {
  background-color: #fff;
  padding: 1%;
}
section.navigation-bar > ul {
  list-style-type: none;
}
section.navigation-bar ul li {
  display: inline;
}
section.navigation-bar ul li a {
  text-decoration: none;
  color: #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
section.navigation-bar ul li a:hover {
  color: #abc;
}
section.columns-area {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  margin-top: 20px;
}
section.columns-area > aside {
  background-color: #fff;
  padding: 20px;
  color: #000;
}
section.footer {
  background-color: #fff;
}
p.footer-text {
  color: #000;
  padding: 1%;
  text-align: center;
  margin-bottom: 1%;
}
p.footer-text > a {
  color: #444;
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Site Test</title>
  <link rel="stylesheet" style="text/css" media="all" href="style.css">
</head>

<body>
  <main>
    <section class="navigation-bar">
      <nav>
        <ul>
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">About</a>
          </li>
          <li><a href="#">Contact</a>
          </li>
          <li><a href="#">Other</a>
          </li>
        </ul>
      </nav>
    </section>
    <section class="columns-area">
      <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex sed pariatur corporis quo illo ad cum itaque, deserunt, fugiat repudiandae iure maxime sapiente id dolores? Ipsam soluta est sed aliquid.Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Amet asperiores officia vitae saepe ullam, voluptates vero excepturi repudiandae. Maxime repudiandae mollitia perspiciatis explicabo eaque eum distinctio adipisci minus quod nesciunt.</aside>
    </section>
    <section class="footer">
      <p class="footer-text">Site created by <a href="#">Mattew</a>
      </p>
    </section>
  </main>
</body>

</html>

Answer 1

你可以试试：

max-width: 100%

没有 mediaqueries 或 flexbox 有可能使响应式网站 100% 吗？

Its possible make a responsive site 100% without mediaqueries or flexbox?

html

css

responsive