gpt4 book ai didi

html - 网站开发简单

转载 作者:太空宇宙 更新时间:2023-11-04 11:54:09 25 4
gpt4 key购买 nike

这就是我制作的小网站的方式,但我有 1 个问题。

网站太小了,我想让它填满整个页面。

网站: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;
}

如何更改内容以适合窗口?

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

我真的被卡住了,我需要这个修复 :(。

谢谢!

-尼克。

最佳答案

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

关于高度:我假设你想要 #content占据整个页面的高度。为此,您必须添加 height: 100%#content及其所有父元素,直至并包括 html .

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

关于html - 网站开发简单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30412800/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com