当浏览窗口被调整大小和在手机中时，页脚的宽度不是100％

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

------------------------ 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的宽度始终适合span 100％，就像我说任何时候我删除内容div页脚div的宽度延伸到100％，在屏幕的右侧没有留下空间。

我真的很喜欢这个问题的答案。谢谢。

来源

2014-07-04 user3775998

我必须承认，我看到您的谷歌尼日利亚Google主页克隆和[立即想想419]（http://en.wikipedia.org/wiki/419_scams）。 – misterManSam

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

您需要删除左侧的位置，因为它在那里确实没有意义。

来源

2014-07-04 15:53:35 athms

由于athms说，问题是H2，类改成这样：

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

来源

2014-07-04 15:59:39 jtorrescr

我想设计这样的页面的最简单的方法是使用VH（查看高度）和钙（）的性质CSS。

基本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>

这种方法的好处是简单，它是充分响应，所有的元素留在文件流（无绝对或固定位置）。

来源

2014-07-04 16:02:13 jme11

当浏览窗口被调整大小和在手机中时，页脚的宽度不是100％

回答

相关问题