移动视图中的列无法正常工作

Question

我创建了一个网站，其中包含带有类名 col 的文本列。它在桌面视图中运行良好。但是在移动视图中，900px 或更小，它不会显示最后一列文本，因为它隐藏在页脚后面。我添加了 clearfix 希望它能解决问题，但它没有。任何人都知道如何解决这个问题？

我的代码：

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: Arial;
}

ul li {
  text-decoration: none;
  list-style: none;
}

body {
  background: #000000;
}

a {
  text-decoration: none;
}

.wrapper-top {
  padding-top: 100px;
  padding-bottom: 40px;
}

#header {
  background-image: url(../images/city-wallpaper.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  height: 600px;
}

.wrapper {
  background: white;
}

.header-wrapper {
  margin: 0 auto;
  max-width: 1000px;
}

.menu-bar li {
  display: inline-block;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
}

.menu-bar {
  padding-top: 20px;
}

.menu-bar a {
  text-decoration: none;
  padding: 0px 20px;
  color: #e6e6e6;
}

.menu-bar a:hover {
  color: #ffffff;
}

.logo-left {
  float: left;
  width: 100px;
  height: 110px;
  background: #1e62cc;
  color: white;
  padding: 10px;
}

.logo-left p:last-child {
  font-size: 15px;
  float: left;
}

.logo-left p:first-child {
  font-size: 32px;
  font-weight: bold;
}

.logo-left p {
  float: left;
}

.section {
  max-width: 1000px;
  margin: 0 auto;
}

.header-section {
  font-size: 110px;
  color: white;
  clear: both;
}

.header-section h1 {
  font-family: 'Roboto', Arial;
  font-weight: bold;
}

.read-more-box {
  position: relative;
  top: -8px;
  left: 1000px;
  background: #1e62cc;
  width: 110px;
  height: 110px;
  display: block;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  font-size: 20px;
}

.block-nav {
  position: relative;
  top: -100px;
  background-color: #292929;
  color: white;
}

.block-nav li {
  width: 25%;
  height: 250px;
  background: #2f2f2f;
  float: left;
  list-style: none;
  transition: all .5s;
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 22px;
  line-height: 250px;
  text-align: center;
  position: relative;
}

.block-nav li:nth-child(2) {
  background: #191919;
}

.block-nav li:nth-child(4) {
  background: #191919;
}

.block-nav {
  transition: all .5s;
}

.block-nav li:hover {
  transform: scale(1.1);
}

.left {
  width: 40%;
  float: left;
}

.right {
  width: 60%;
  float: right;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}


/* start commented backslash hack \*/

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}


/* close commented backslash hack */

.container {
  position: relative;
  top: -70px;
}

.container h2 {
  font-size: 40px;
  color: #1e62cc;
  margin-bottom: 10px;
}

.ctr-image {
  width: 100%;
  float: right;
}

.first {
  width: 50%;
  height: 600px;
  background-image: url(../images/city-wallpaper2.jpg);
  background-repeat: no-repeat;
  float: left;
  padding: 20px;
  box-sizing: border-box;
  font-size: 22px;
}

.first h2 {
  color: #1e62cc;
  font-size: 30px;
  font-weight: bold;
}

.second {
  background-image: url(../images/city-lights.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 50%;
  height: 300px;
  float: right;
}

.second p {
  color: white;
  font-size: 22px;
  box-sizing: border-box;
  padding: 20px;
}

.second-a {
  width: 50%;
  float: right;
  color: black;
}

.second-b {
  width: 50%;
  height: 300px;
  float: right;
}

.second-c {
  width: 50%;
  height: 300px;
  float: left;
  background: blue;
}

.footer-section {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
  color: white;
}

.footer-section li {
  list-style: none;
  float: right;
  margin: 0px 20px;
}

.footer-section a {
  color: white;
}

.right {
  float: right;
}

.left {
  float: left;
}

.third-a {
  border-bottom: 1px solid grey;
}

.third-b {}

.article {
  background-color: white;
  color: black;
  width: 100%;
  box-sizing: border-box;
  float: right;
  height: 150px;
  padding: 20px;
}

.article h2 {
  font-size: 24px;
  color: #1e62cc;
}

.second-b {
  background-image: url(../images/town.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.color-box {
  width: 100%;
  height: 300px;
  background-color: rgba(0, 140, 255, 0.5);
  line-height: 300px;
  text-align: center;
  cursor: pointer;
}

.color-box:hover {
  background-color: rgba(0, 140, 255, 0.8);
}

.color-box-content {
  color: white;
  font-size: 22px;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.color-box-content i {
  vertical-align: middle;
  margin-right: 10px;
}

.block {
  position: absolute;
  top: -100px;
  left: 20px;
}

.top-link {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #1e62cc;
  float: right;
  color: white;
  cursor: pointer;
}

.top-link a {
  color: white;
}

.top-link:hover,
.read-more-box:hover {
  background: #174b9a;
}

.equal-height-container {
  margin-bottom: 40px;
}

.top-link span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.logo-right {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: #e31e09;
  float: right;
  text-align: center;
  color: white;
  cursor: pointer;
  position: relative;
}

.logo-right:hover {
  background-color: #c70000;
}

.logo-right .fa-bars {
  display: inline-block;
  vertical-align: middle;
}

.nav-expanded {
  display: block;
}

.logo-right {
  display: none;
}

.menu-bar-open {
  list-style: none;
  display: inline-block;
  padding-top: 20px;
}

.menu-bar-open li {
  display: inline-block;
  font-size: 22px;
  color: white;
}

.menu-bar-open a {
  color: white;
  padding: 0 20px;
}

.menu-bar-open li a:hover {
  color: #dcdcdc;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
}


/*  FEATURES.HTML  */

#header-features {
  background-image: url(../images/city-wallpaper.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  height: 70px;
}

.features-section {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.features-header {
  font-size: 70px;
  margin-bottom: 20px;
}

.features-text {
  max-width: 700px;
  margin: 0 auto 20px;
  padding: 0 10px
}

.features-table {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.col {
  width: 25%;
  float: left;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.col:nth-child(odd) {
  background: #dedede;
}

.col:nth-child(even) {
  background: #f9f9f9;
}

.col h2 {
  font-size: 24px;
}

.col li {
  padding: 10px;
  border-bottom: 1px solid grey;
  text-align: left;
}


/* SERVICES */

.services-section {
  padding: 0 10px 50px;
  margin: 0 auto;
  max-width: 600px;
}

.services-section h3 {
  font-size: 30px;
  margin-bottom: 10px;
  color: red;
}

.services-section p {
  padding-bottom: 10px;
}


/*CONTACT*/

.contact-container {
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 20px;
}

.contact-section {
  width: 60%;
  float: left;
  padding: 40px;
  box-sizing: border-box;
  background: #F2F2F2;
}

.contact-section h2,
.contact-aside h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.contact-aside {
  max-width: 25%;
  float: right;
  padding: 40px;
  box-sizing: border-box;
  background: #F2F2F2;
  ;
}

.contact-section textarea {
  width: 100%;
  margin-top: 30px;
  height: 100px;
  margin-bottom: 20px;
}

.textfield input {
  width: 50%;
  height: 30px;
  margin-bottom: 20px;
}

.textfield {
  font-weight: bold;
}

.textfield p {
  margin-bottom: 10px;
}

.contact-btn {
  width: 100px;
  height: 30px;
  border: 0px;
  background: #4DA0E9;
  cursor: pointer;
  outline: 0;
  /* läheb vaja kuna muidu kui on active tekkib piirjooned */
  color: white;
  font-size: 18px;
  font-family: Arial;
  border-radius: 4px;
  color: white;
}

.contact-btn:hover {
  background: #428BCA;
}

.contact-header {
  text-align: center;
  font-size: 70px;
  margin-bottom: 20px;
}


/*ABOUT*/

.about-section {
  padding: 0 10px 50px;
  margin: 0 auto;
  max-width: 600px;
}

.title {
  text-align: center;
  font-size: 70px;
}

**RESPONSIVE CSS** @media screen and (max-width: 900px) {
  .header-section h1 {
    font-size: 70px;
    margin-top: 100px;
  }
  .read-more-box {
    position: static;
    margin-top: 20px;
  }
  .col {
    width: 100%;
    height: auto;
  }
  .menu-bar-open li a:hover {
    background: #960000;
    color: white;
  }
  .contact-section,
  .contact-aside {
    width: 100%;
  }
  .contact-aside {
    max-width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .header-section h1 {
    font-size: 40px;
  }
  .menu-bar li {
    display: block;
  }
  .read-more-box {
    position: static;
    margin-top: 20px;
  }
  .menu-bar {
    display: none;
  }
  .logo-right {
    display: block;
  }
  .menu-bar-open {
    position: absolute;
    top: 50px;
    right: 0;
    list-style: none;
    background: #e31e09;
    display: none;
    padding-top: 0px;
  }
  .menu-bar-open li a {
    color: white;
    padding: 20px;
    width: 200px;
    float: left;
  }
  .menu-bar-open li {
    display: block;
  }
  .textfield input {
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .first,
  .third-a,
  .third-b,
  .second-a,
  .second-b,
  .second,
  .second-c,
  .left,
  .right {
    width: 100%;
  }
  .first {
    height: 300px;
  }
  .header-section {
    margin-top: 80px;
  }
  .block-nav {
    top: -200px;
  }
  .fa-4x {
    font-size: 2em;
  }
  .block-nav li {
    width: 50%;
    height: 150px;
    line-height: 150px;
  }
  .block {
    top: -50px;
  }
  .container {
    padding: 20px;
  }
  .header-section {
    margin-top: 20px;
  }
  .left,
  .right {
    width: 100%;
  }
  .footer-section li {
    float: none;
    margin: 10px 0px;
  }
  .footer {
    padding: 20px;
  }
  .nav-expanded {
    display: block;
  }
  .contact-section {
    padding-top: 50px;
  }
  .footer-section {
    padding: 20px;
  }
}

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

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>this is the title</title>

  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">

</head>

<body>

  <div id="header-features">
    <div class="header-wrapper" id="top">
      <div class="logo-left">
        <p>COOL</P>
        <p>website</p>
      </div>
      <div class="logo-right" id="menu-btn">
        <span>
    				<i class="fa fa-bars fa-2x" aria-hidden="true" ></i>
    			</span>
      </div>
      <ul class="menu-bar-open">
        <li><a href="index.html">Home</a></li>
        <li><a href="features.html">Features</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact-us.html">Contact us</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </div>
  </div>
  <div class="wrapper wrapper-top">
    <div class="features-section">
      <div class="features-container">
        <h2 class="title">Features</h2>
        <p class="features-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, inventore, ipsa, quidem, nam culpa error odit alias perferendis fugiat similique ab illum temporibus ducimus sint deserunt recusandae consequatur facere voluptate nulla quis nemo
          doloribus deleniti odio modi officiis provident debitis commodi. Et minus ullam molestias accusantium quaerat! Laudantium, tempora, reiciendis.</p>
      </div>

      <div class="features-table clearfix">
        <div class="col">

          <ul>
            <li>
              <h2>lorem</h2>
            </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, nisi dignissimos earum consequatur officiis totam velit delectus iusto vero dolor reprehenderit maiores voluptatibus recusandae non suscipit mollitia neque aliquam eos?
            </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
          </ul>
        </div>
        <div class="col">
          <ul>
            <li>
              <h2>ipsum</h2>
            </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, inventore assumenda nostrum commodi fuga necessitatibus reprehenderit earum officiis incidunt velit. </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
          </ul>

        </div>
        <div class="col">
          <ul>
            <li>
              <h2>sit</h2>
            </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, possimus labore harum quas doloremque laboriosam!</li>
            <li>Odd and even are keywords that can be used to match </li>
          </ul>

        </div>
        <div class="col">
          <ul>
            <li>
              <h2>amet</h2>
            </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quas, maxime, voluptate inventore vero blanditiis eveniet recusandae reprehenderit perspiciatis minima maiores expedita rerum magni aspernatur. </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="footer-section">
    <div class="left">
      <a href="">Contact information</a>
    </div>

    <div class="right">
      <ul class="footer-nav">
        <li><a href="">Contact us</a></li>
        <li><a href="">Copyright</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Features</a></li>
      </ul>
    </div>
  </div>
  <script src="script/jquery-3.2.0.min.js"></script>
  <script src="script/script.js"></script>

</body>

</html>

Answer 1

问题出在这里：

.features-table {
  ...
  height: 500px;
}

所有屏幕尺寸的高度都固定为 500 像素。您需要在媒体查询中覆盖它。

@media screen and (max-width: 700px) {
  ...
  .features-table {
    height: auto;
  }
}

Answer 2

您可以尝试将 px 更改为 %
因为 % 取决于屏幕，如果你设置 100%，那么它会在你的手机上显示全屏，但如果你设置 100px，它可能只是在你的手机上占一个很小的地方