构建谷歌搜索页面html css克隆，无法让布局延伸到整个屏幕答案

【问题标题】：Building google search page html css clone, cant get the layout to stretch over whole screen构建谷歌搜索页面html css克隆，无法让布局延伸到整个屏幕
【发布时间】：2021-12-28 08:03:42
【问题描述】：

我似乎无法让我的页面完全显示（它只是停留在顶部）。我尝试做.html{margin +height} 或只做.body{margin height}，以及将它们组合起来，或者将弹性框添加到 CSS 类中，但似乎没有任何效果。它看起来像这样：

.body,
.html {
  margin: 0%;
  height: 100%;
}
#nav {
  display: flex;
  justify-content: flex-end;
  margin: top 15px;
}
a {
  margin-right: 20px;
}

#nav.topimage {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
}
#nav.toplink {
  width: 20px;
  height: 20px;
}
#middle {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#logo {
  text-align: center;
  margin: top 300px;
}
#searchbarcontainer {
  margin-top: 20px;
  text-align: center;
}

#searchbar {
  padding-top: 20px;
  padding-bottom: 20px;
  outline: 0;
  width: 500px;
  border-radius: 10px;
  border: 2px solid chocolate;
}
#buttons {
  margin-top: 30 pixels;
  display: flex;
  justify-content: center;
}

.button {
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
  background: rgb(224, 224, 224);
  border-radius: 3px;
}
#links {
  text-align: center;
}

.body {
  display: flex;
  flex-direction: column-gap;
}

#footer-content {
  background: rgb(221, 27, 27);
  border-top: 1px solid blanchedalmond;
}

<!DOCTYPE html>
<html>
<head>
    <title>google clone</title>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
  <div id="nav">
<a class="toplink">gmail</a>
<a class="toplink">image</a>
<a class="topimage">xxx</a>


  </div>

  <div id="middle">
<div id="logo">
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>

<div id="searchbarcontainer">
<input id="searchbar" type="text">
</div>
<div id="buttons">
<div class="button">
    Google Search
</div>
<div class="button">
    I am feeling lucky
</div>
    </div>
    <div id="links">
        Google is offered in <a href="">X</a>
        </div>
</div>

<div id="footer">
<div id="footer-content">

</div>
    <a>xxx</a>
    </div>
    </div>
</body>
</html>

似乎没有任何效果，我不知道它是否与 flex 或我的 html 有关。

【问题讨论】：

标签： html css flexbox clone

【解决方案1】：

看看这是否有效。 运行 sn-p

如果可行，只需复制我的代码并查看我对您的代码所做的调整。

.body,
.html {
  margin: 0;
  height: 100vh;
  box-sizing: border-box;
}

section {
height: 100vh;
}

#middle-container{
height: 100%;
display:flex;
flex-direction: column;
justify-content:center;
}

#nav {
  display: flex;
  justify-content: flex-end;
  padding-top: 15px;
}
a {
  margin-right: 20px;
}

#nav.topimage {
  width: 20px;
  background: red;
  border-radius: 50%;
}
#nav.toplink {
  width: 20px;
}

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

#searchbarcontainer {
  margin-top: 20px;
  text-align: center;
}

#searchbar {
  padding-top: 20px;
  padding-bottom: 20px;
  outline: 0;
  width: 500px;
  border-radius: 10px;
  border: 2px solid chocolate;
}
#buttons {
  margin-top: 30 pixels;
  display: flex;
  justify-content: center;
}

.button {
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
  background: rgb(224, 224, 224);
  border-radius: 3px;
}
#links {
  text-align: center;
}

#footer-content {
  background: rgb(221, 27, 27);
  border-top: 1px solid blanchedalmond;
}

<!DOCTYPE html>

<html>
<head>
    <title>google clone</title>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
  <section class="main">
    <div id="nav">
<a class="toplink">gmail</a>
<a class="toplink">image</a>
<a class="topimage">xxx</a>
  </div>
  
<div id="middle-container">
  <div id="middle">
<div id="logo">
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>

<div id="searchbarcontainer">
<input id="searchbar" type="text">
</div>
<div id="buttons">
<div class="button">
    Google Search
</div>
<div class="button">
    I am feeling lucky
</div>
    </div>
    <div id="links">
        Google is offered in <a href="">X</a>
        </div>
</div>
</section>
<div id="footer">
<div id="footer-content">

</div>
    <a>xxx</a>
    </div>
      </div>
</body>
</html>

【讨论】：