移动布局问题

Question

我的问题与#content和#sidebar有关。它在浏览器中工作正常，即它以垂直形式显示。但是移动布局都是乱七八糟的，因为#sidebar每次在我的iPhone上查看#content都会覆盖{。}}。

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: Quicksand, sans-serif;
  font-weight: 100;
  padding: 0px;
  margin: 0px;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
  /*for content and sidebar */
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}


/* main */

#content {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 80%;
  flex: 1 1 80%;
  /* for header/logo and description */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#header {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 6%;
  flex: 1 0 6%;
  /* background-color: green; */
  /* for test */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 10px 0 0 0;
}

#test {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: 10px;
}

#header h1 {
  text-align: center;
  font-size: 5em;
  padding: 0;
  margin: 0;
  font-family: 'Qwigley', cursive;
}

h1 {}

#description {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 55%;
  flex: 1 1 55%;
  /* background-color: yellow; */
  padding: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#description p {
  padding-left: 20px;
  font-size: 20px;
}

#description img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 4px solid #db6525;
  display: none;
}

#description img:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#flippedButterfly {
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

#name {
  font-size: 35px;
  color: #db6525;
}

#test img {
  display: inline;
  vertical-align: text-top;
  width: 100px;
  height: 100px;
  /* for the following image and description */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: none;
}

#sidebar {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 20%;
  flex: 1 0 20%;
  /* background-color: green; */
  text-align: center;
  /* for sidebar contents */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

#js {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 10.0000%;
  flex: 1 0 10.0000%;
}

#js:hover {}

#js h1 {
  font-size: 40px;
  font-family: 'Qwigley', cursive;
}

#forms {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 11.11111%;
  flex: 1 0 11.11111%;
}

#forms:hover {}

#forms h1 {
  font-size: 40px;
  font-family: 'Qwigley', cursive;
}

#sites {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 11.11111%;
  flex: 1 0 11.11111%;
}

#sites:hover {}

#sites h1 {
  font-size: 40px;
  font-family: 'Qwigley', cursive;
}

@media only screen and (min-width: 320px) {
  * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  html,
  body {
    height: 100%;
    font-family: Quicksand, sans-serif;
    font-weight: 100;
    padding: 0px;
    margin: 0px;
  }
  body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    /*for content and sidebar */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  /* main */
  #content {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 80%;
    flex: 1 1 80%;
    /* for header/logo and description */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #sidebar {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 20%;
    flex: 1 0 20%;
    /* background-color: green; */
    text-align: center;
    /* for sidebar contents */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
}

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="images/favicon.png" />
  <link href='https://fonts.googleapis.com/css?family=Qwigley' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/css?family=Quicksand|Roboto" rel="stylesheet">
  <link href="normalize.css">
</head>

<body>
  <main>
    <section id="content">
      <article id="header">
        <section id="test">
          <img src='images/butterfly.png' />
          <h1>My WebSite</h1>
          <img id="flippedButterfly" src='images/butterfly.png' />
        </section>
      </article>
      <article id="description">
        <img src='#' />
        <p><span id="name">Hi, I'm </span><br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed volutpat sapien. Curabitur ultricies felis arcu, at rhoncus felis suscipit quis. Integer pulvinar <br /><br />sagittis enim at sodales.
          In eget tortor porta, faucibus magna eu, facilisis nulla. Proin at ex sed arcu tempor vehicula. Vestibulum volutpat arcu sed odio sollicitudin consequat. Sed nisi est, <br /><br />vestibulum vel vulputate sed, porta id sem. Sed metus ipsum,
          ullamcorper eget eleifend non, feugiat eget risus. Donec fermentum sodales ante sit amet viverra. Proin vitae erat auctor, sollicitudin ligula in, condimentum arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </p>
      </article>
    </section>
    <section id="sidebar">
      <article id="js">
        <h1>Javascript</h1>
        <p>Mini JS Projects</p>
        <p class="subtitle">Work in progress
      </article>
      <article id="forms">
        <h1>Free Forms</h1>
        <p>Feel free to download the forms</p>
      </article>
      <article id="sites">
        <h1>Portfolio</h1>
        <p>Combination of previous work and additional sites</p>
      </article>
    </section>
  </main>
</body>

</html>

Answer 1

主要问题是您在容器上设置了height: 100%（例如html，body等。这会将容器的高度限制为视口高度。

由于内容无法扩展超出视口限制，因此必须相互重叠。

我会说，摆脱代码中的所有height: 100%规则。

提供主要灵活容器min-height: 100vh。

然后研究孩子的百分比高度。通过调整/删除，您的布局可以正常工作（即重叠消失）。