Question

所以这就是我制作的小网站，但我有一个问题。

网站太小了，我希望它能填满整个页面。

HTML CODE：

<html>
   <head>
      <title>Office Hunters</title>
      <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
      <div id="container">
      <div id="header">
         <h1>Office Hunters</h1>
      </div>
      <div id="content">
      <div id="nav">
         <h3>Website Navigation</h3>
         <ul>
            <li><a class="selected" href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact Us</a></li>
         </ul>
      </div>
      <div id="main">
         <h2>Home Page</h2>
         <p> Paragrah 12uey234u3hrdheywhgfhuhwefdghuwyhf</p>
         <p> heurdfhuergfhuegfuefyuegf</p>
         <p> 2gu1eqgu23geu32gheiu3gey</p>
      </div>
      <div id="footer">
         Copyright &copy; 2014 Nicholas Jojo
      </div>
   </body>
</html>

CSS：

body {
background-color: #DF7401;
}
a {
text-decoration: none;
color: blue;
}
h1, h2, h3 {
margin: 0;
}
#container {
background-color: white;
width: 800px;
margin-left: auto
margin-right: auto
}
#header{
background-color: #8A2908;
text-align: center;
color: white;
padding: 10px;
}
#content {
padding: 10px;
}
#nav {
width: 180px;
float: left;
}
#nav ul {
list-style-type: none;
padding: 0;
}
#nav .selected {
font-weight: bold;
}
#main {
width: 600px;
float: right;
}
#footer {
clear: both;
padding: 10px;
background-color: #9999999;
color: white;
text-align: right;
}

如何更改内容以适应窗口？

你能编辑一些代码来帮助我吗？

我真的被困住了，我需要修复它:(。

谢谢！

-Nick。

Answer 1

#container有一个固定的宽度（800像素），因此它不能大于此值。删除该行（width: 800px;），它将展开以覆盖整个宽度。

关于身高：我假设您希望#content占据整个页面高度。为此，您必须将height: 100%添加到#content及其所有父元素，包括html。

html, body, #container, #content {
    height: 100%;
}

Answer 2

将宽度从固定金额更改为百分比。例如'

#container {
  background-color: white;
  width: 100%;
  margin-left: auto
  margin-right: auto
}

#main {
  width: 80%px;
 float: right;
}

等

网站开发简单

2 个答案: