避免内容推高其上方的内容

Question

我正在尝试让搜索栏保持在屏幕的中心，但这是在下面添加内容时会发生的情况：

正如您在图像中看到的那样，文本正在向上推动搜索栏，但我希望搜索栏始终位于屏幕中央，并且所有文本都位于其下方。我顺便使用flexbox。这是我的代码的样子：

/* GENERAL STYLES */

* {
  outline: none !important;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  border: 0;
  margin: 0;
}

body {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #4c4c4c;
}

body,
h1 {
  margin: 0;
}

a {
  text-decoration: none;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

form {
  display: flex;
  justify-content: center;
}

/* Wikipedia Viewer heading */

.title {
  font-weight: 300;
  font-size: 3em;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 15px;
}

/* SEARCH BAR */

.fa {
  font-size: 20px;
}

.form-search {
  display: inline-block;
  flex-basis: 1000px;
}

.form-search input {
  padding: 0;
  width: 100%;
  height: 80px;
  font-size: 20px;
  border: 1px solid #bebebe;
  border-right: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-left: 20px;
}

/* Styles for input placeholder with support for different browsers */

.form-search input::-webkit-input-placeholder {
  font-family: 'Open-Sans', sans-serif;
  font-weight: 300;
  color: #a5a5a5;
  font-family: 'Montserrat', sans-serif;
}

.form-search input::-moz-placeholder {
  font-family: 'Open-Sans', sans-serif;
  font-weight: 300;
  color: #a5a5a5;
  font-family: 'Montserrat', sans-serif;
}

.form-search input::-ms-input-placeholder {
  font-family: 'Open-Sans', sans-serif;
  font-weight: 300;
  color: #a5a5a5;
  font-family: 'Montserrat', sans-serif;
}

.form-search input::-o-input-placeholder {
  font-family: 'Open-Sans', sans-serif;
  font-weight: 300;
  color: #a5a5a5;
  font-family: 'Montserrat', sans-serif;
}

.btn {
  border: 0;
  padding: 0;
  height: 80px;
  border-radius: 0 5px 5px 0;
  background: #EE3524;
  color: #FFF;
  flex-basis: 300px
}

.btn:hover {
  background: #cf2010;
  cursor: pointer;
}

/* Styles for "tell me what to read" text */

.main-container>a {
  display: table;
  position: relative;
  margin: 20px auto 0 auto;
}

.main-container>a:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 2px;
  background: #EE3524;
  -webkit-transition: 1s ease;
  transition: 1s ease;
}

.main-container>a:hover:after {
  width: 100%;
}

.main-container h2 {
  font-size: 1.5em;
  font-weight: 400;
  color: #4c4c4c;
  margin: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="javascript/script.js" async></script>
    <link rel="stylesheet" href="images/font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <title>Wikipedia Viewer</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="main-container">
        <h1 class="title">Wikipedia Viewer</h1>
        <form>
          <div class="form-section form-search">
            <input type="text" placeholder="Search here...">
          </div>
          <button type="submit" class="btn">
            <i class="fa fa-search aria-hidden=true"></i>
          </button>
        </form>
        <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">
          <h2>Tell me what to read</h2>
        </a>
      </div>
      <div class="search-results-container">
        <h1 id="description"></h1>
      </div>
    </div>
  </body>
</html>

我希望你能帮助我。提前致谢！

Answer 1

在你的代码中看到你的.wrapper { - 应该清楚你扔进去的任何其他内容 - 将反映到所需的三个元素（标题，搜索和链接）的位置 - 向上推动它们。

相反，如果你的三个元素的累积高度不会改变，你可以：

padding-top: calc(50vh - <half form height px>);

像是：

/*QuickReset*/*{margin:0;box-sizing:border-box}html,body{height:100%;font:14px/1.4 sans-serif;}

.content {
  margin: 0 auto;
  max-width: 60%;
}

#aboveTheFold{
  min-height: 100vh;
}

#searchForm {
  padding-top: calc(50vh - 40px); /* minus half form height */
  text-align: center;
}

<div class="content" id="aboveTheFold">

  <form id="searchForm">
    <h1>WIKIPEDIA VIEWER</h1>
    <input name="search" tyle="text"><input type="submit" value="VIEW">
    <p><a href="#">Tell me what to read</a></p>
  </form>

  <p style="height:200vh;border:4px dashed blue;">Lorem ipsum longis textis...</p>
</div>

避免内容推高其上方的内容

问题描述投票：0回答：1

1个回答

最新问题

避免内容推高其上方的内容

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1