Question

我有谷歌网页的这个克隆我刚刚练习。我有这个问题，在浏览器上通常页脚扩展到100％，屏幕右侧没有空格，但只要我调整浏览器大小，页脚立即调整大小，宽度不是100％。此外，屏幕右侧还有一个巨大的空间，并且水平滚动条会在窗口调整大小后立即变为活动状态。当我尝试在手机上查看页面时也是如此。我将粘贴下面的CSS代码和html代码，以便您自己查看。

------------------------ INDEX.HTML -------------------- -----------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Clone</title>
<link rel="stylesheet" href="main.css" />
</head>

<body>
    <nav>
        <ul>
          <li><a href="#">+You</a></li>
          <li><a href="#">Gmail</a></li>
          <li><a href="#">Images</a></li>
          <li class="square" title="apps"> </li>
          <li><form action="index.html"> <input type="submit" name="Signin" value="Sign in" /></form></li>
       </ul>

</nav>

  <div id="content">
  <img src="images/logo.png" alt="google logo" title=" Google"/>
  <h2>Nigeria</h2>

  <form action="#" method="post" >
  <input type="text" name="search" />
  <input type="submit" name="googlesearch" value="Google Search" />
  <input type="submit" name="lucky" value="I'm Feeling Lucky" />
  </form>
  <pre>
  Google.com.ng offered in:  <a href="#">Harshen Hausa</a>   <a href="#">Asụsụ ``   <a href="#">Èdè Yorùbá</a>   <a href="#">Pidgin</a>
  </pre>
  </div>
  <div id="footer">
    <ul>
      <li><a href="#">Advertising</a></li>
      <li><a href="#">Business</a></li>
      <li><a href="#">About</a></li>
    </ul>

    <ul id="second">
      <li><a href="#">Privacy & Terms</a></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">Use Google.com</a></li>
    </ul>
  </div>

</body>
</html>

---------------------------------的main.css ----------- -----------------------------

body,html {
  margin: 0; 
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Geneva, Arial, Helvetica, sans-serif;
}


nav ul {
  float: right;
  list-style: none;
  margin: 15px 5px 0 0;

}

nav ul li {
 display: block;
 float: left;
 padding: 8px;
 text-align: center;

}
nav ul li a {
  text-decoration: none;
  font-size: 13px;
  color: #333;
}

nav ul li a:hover {
  text-decoration: underline;
}

nav ul li.square {
  background: url('images/square.png') 0px 0px no-repeat;
  margin: 8px 13px 0px 18px;
}

nav ul li.square:hover {
  background: url('images/square-black.png') 0px 0px no-repeat;
}


nav input[type=submit] {
   color: white;
   height: 30px;
   width: 72px;
   background: #4585F3;
   font-weight: 600;
   border: none;
   border-radius: 2px;
   font-size: 14px; 

   margin-top: -5px;

 }


 #content {
    width: 575px;
    height: 400px;
    border: 1px solid grey;
    margin: 0 auto;
    clear:both;
}

 #content img { margin: 147px 10px 0 147px;  }
 #content h2 { 
    font-size: 16px; 
    font-weight: bold; 
    color: #777; 
    position: relative; 
    left: 370px;
    top: -23px;
}
#content input[type=text] {
  width: 572px;
  height: 29px;
  border: 1px solid #d9d9d9;
}

#content input[type=text]:hover {
  border: 1px solid #b2b2b2;
}



#content input[type=text]:focus {
  border: 1px solid #4285f4;
}

#content input[type=submit]{
  background-color: #f2f2f2;
  border: 1px solid #d8d8d8;
  text-align: center;
  color: #444;
  padding: 5px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: bold;
  margin-top: 17px;
  margin-left: 180px; 
  font-family: Geneva, Arial, Helvetica, sans-serif;
}

#content input[name=lucky]{ margin-left: 13px; }
#content input[type=submit]:hover{ border-color: #c6c6c6; box-shadow: 0px 3px 2px -2px #d9d9d9; }
#content pre { font-size: 12px; margin-top: 40px; margin-left: 30px;}
#content a {text-decoration: none; color: #4122DC; }
#content a:hover {text-decoration: underline; }
#footer {
  font-size: 13px;
  margin-bottom: 0; 
  position: absolute; 
  bottom: 0; 
  background-color: #f2f2f2;
  border-top: 1px solid #e4e4e4;
  width: 100%;
  height: 43px;
  padding: 0; 
}
#footer ul { margin: 0;  }
#footer ul li { float: left;  padding: 15px  18px 10px 10px; }
#footer ul li a { color: #67656A; text-decoration: none; }
#footer ul li a:hover { text-decoration: underline; }
#footer ul#second { float: right; }

好。带有id称为内容的div就是问题所在，因为每当我删除它时，我都不会遇到页脚不适合整个屏幕宽度的问题。我已经煞费苦心地改变了内容div的不同属性值，但问题仍然存在。我知道我可能会得到回复，因为我没有使用媒体查询语法，但这不是问题，因为我设计的网站没有媒体查询，但调整后的宽度div总是适合100％，就像我说的，当我删除内容div时，页脚div的宽度延伸到100％，屏幕右侧没有空格。

我真的很想回答这个问题。感谢。

Answer 1

由于某种原因，您的H2元素（默认为100％宽度）设置为left: 370px。这导致#content div内的溢出，因此是页面右侧空格背后的原因。

你需要删除左侧定位，因为它在那里没有意义。

Answer 2

当运动员说问题是h2时，将你的班级改为：

#content h2 { 
    font-size: 16px; 
    font-weight: bold; 
    color: #777; 
    top: -23px;
    text-align:center;
}

Answer 3

我认为设计这样的页面的最简单方法是在css中使用vh（视图高度）和calc（）属性。

基本CSS：

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}
nav {
  height: 50px;
  width: 100%;
}
main {
  width: 100%;
  height: calc(100% - 100px); /*100px is the height of the nav + footer*/
}
footer {
  height: 50px;
  width: 100%;
}

基本HTML：

<body>
  <nav>Navigation here</nav>
  <main>Main content here</main>
  <footer>Footer content here</footer>
</body>

这种方法的好处是简单，它完全响应，并且所有元素都保留在文档的流程中（没有绝对或固定的位置）。

在调整浏览窗口大小和移动电话时，页脚的宽度不是100％

3 个答案: