文章/答案/技术大牛

发布

社区首页 >问答首页 >网站开发简单

问网站开发简单
EN

Stack Overflow用户

提问于 2015-05-23 20:42:35

回答 2查看 41关注 0票数 0

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

这个网站太小了，我想让它占满整个页面。

网址：http://postimg.org/image/zfhnqvunb/

HTML代码：

<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。

html

css

回答 2

Stack Overflow用户

发布于 2015-05-23 20:46:44

#container有一个固定的宽度(800像素)，所以它不能比这个更大。删除该行(width: 800px;)，它将扩展到覆盖整个宽度。

关于高度:我假设你想让#content占据整个页面高度。要实现这一点，您必须将height: 100%添加到#content及其所有父元素，包括html。

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

票数 1

Stack Overflow用户

发布于 2015-05-23 20:47:59

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

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

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

等

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30412800

复制

相似问题

问网站开发简单
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网站开发简单EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问网站开发简单
EN