Question

我正在尝试做一个简单的响应＆＃34;关于＆＃34;页。一切正常，直到我将浏览器调整到一个较小的窗口。

HTML

<div id="content">
        <div id="area-container">
            <h1>about</h1>
            <div id="textarea">
                <p>My name is...[lorem200words]</p>
            </div>
        </div>
    </div>

CSS

body {
    margin: 0 auto;
    overflow: hidden;
    font-family: 'Share Tech Mono', monospace;
}

#content {
    width: 100%;
    height: 2457px;
    background-image: url('../images/wallpaper.jpg');
}

#area-container {
    display:inline-block;
    margin-top: 50vh;
    margin-left: 50vw;
    transform: translate(-50%, -60%);
}


@media screen and (max-width:800px) {
    body {
        overflow-y: scroll;
    }

    #content {
        width: 100%;
        height: 100%;
        background-image: url('../images/connected.png');
    }
}

https://jsfiddle.net/a4uaquyp/3/

问题是整个textarea div似乎跳出浏览器，当我将overflow添加到它赢得的身体时，我不能向上滚动。由于某些原因，下面还有很多空间。

我尝试使用媒体查询以某种方式将#content推到margin-top和vw / vh，我无法想到其他任何事情

Answer 1

问题在于您与transform: translate(-50%, -60%)和margin-top: 50vh一起使用margin-left: 50vw。虽然这会抵消内容，但如果显示的内容太多，它会溢出。

相反，如果你想集中很多内容，我会推荐flexbox。这使您只需几行代码即可实现所需的结果：

#content {
  display: flex;
  align-items: center;
  justify-content: center;
}

#area-container {
  max-width: 50%;
}

这可以在以下内容中看到：

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
body {
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Share Tech Mono', monospace;
}

#content {
  width: 100%;
  background-image: url('../images/wallpaper.jpg');
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px; /* Just to give space at the bottom */
}

#area-container {
  max-width: 50%;
}

#textarea {
  background-color: #fff;
  box-shadow: 0 0 3em #ccc;
  border-radius: 10px;
  padding: 10px;
}

#area-container h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 5vw;
}

#area-container h1:before,
#area-container h1:after {
  content: '-';
  font-weight: normal;
}

@media screen and (max-width:800px) {
  body {
    overflow-y: scroll;
  }
  #content {
    width: 100%;
    height: 100%;
    background-image: url('../images/connected.png');
  }
  #area-container h1 {
    font-size: 40px;
  }
}

＆＃13;

<body>
  <div id="content">
    <div id="area-container">
      <h1>about</h1>
      <div id="textarea">
        <p>y name is... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odit repudiandae veritatis hic facere non aperiam sunt dolor, ut enim? Sunt tempora et saepe quae, optio fugiat, eaque corrupti dignissimos modi tenetur sint corporis
          dolore. Harum sunt eligendi, facilis, quos obcaecati consequatur earum, qui molestiae ducimus inventore optio. Minus quas sed, fugit fuga culpa neque magni quisquam doloremque tempora ad, et quia possimus voluptatibus enim iusto esse omnis recusandae
          in eos provident nobis totam aliquid. Iste fugit tenetur, odio voluptates impedit veritatis reiciendis. Enim eaque quod repudiandae velit eum, quo commodi, odio quasi quos laboriosam iusto dolores laborum sapiente tenetur nihil sunt, nam nostrum
          at accusamus id facere magnam! Quibusdam sint, velit similique harum alias neque doloremque labore iste officia repellat quae dolorum suscipit ad nostrum eaque quisquam, amet voluptatibus, laborum sit quaerat dolorem sunt laudantium. Nam necessitatibus
          repellendus ipsum officia nulla commodi. Eveniet amet fuga, dolores voluptas nemo impedit laudantium facere, eum iste officiis perspiciatis. Quae ipsa eligendi dolor laborum optio ipsam commodi temporibus sequi, adipisci nobis facere, iste deserunt
          architecto rem odit ullam, tenetur fuga veniam. Sed maiores libero odio nostrum officia, dolores expedita quisquam asperiores eligendi ad soluta incidunt earum, vitae, omnis esse voluptatum perferendis ab commodi.</p>
      </div>
    </div>
  </div>
</body>

＆＃13;

另请注意，您可能不希望限制height的{{1}}。我已从上面的代码段中删除了#content。

在调整大小时，带有大量文本的Div将不在页面中

1 个答案: