所以我的网站是 www.jacobweyer.com
当窗口变小时，它会在右侧创建一个大的灰色区域，页眉和页脚不会扩展到覆盖区域。如何在保留小缓冲区的同时去掉大的内容较少区域？我还有一个问题，我希望我的社交媒体按钮尽可能靠右，但我希望它仍然尽可能靠右，直到它可能与标题重叠。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpha Tau Omega | Theta Omega</title>
<link rel="stylesheet" type="text/css" href="ATOStyle.css" />
<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="innerheader">
<div id="banner">
</div><!-- End banner-->
<div id="title">
</div> <!--End title -->
<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rush.html">Rush</a></li>
<li><a href="history.html">History</a></li>
<li><a href="alumni.html">Alumni</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="media.html">Media</a></li>
</ul>
</div> <!--End navbar -->
</div><!-- End innerheader -->
<div id="outersocial">
<div id="social">
<ul>
<li>
<img src="./pieces/socialmedia/facebook.png" />
</li>
<li>
<img src="./pieces/socialmedia/twitter.png" />
</li>
<li>
<img src="./pieces/socialmedia/youtube.png" />
</li>
</ul>
</div> <!-- End social-->
</div> <!--End outersocial -->
</div> <!-- End header -->
<div id="pagecenter">
</div> <!-- End pagecenter -->
<div id="footer">
<div id="footercontent">
<div id="footerbanner1">
</div> <!--end footerbanner1-->
<div id="footernav">
<p> Alpha Tau Omega Fraternity | Theta Omega Chapter | Northern Kentucky University | <a href="contactus.html">Contact Us!</a></p>
</div> <!-- End footernav-->
<div id="footerbanner2">
</div> <!-- End footerbanner2-->
</div> <!--end footercontent -->
</div> <!--end footer-->
</body>
</html>
CSS
body {
height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
background-color: #808080
}
/* Header Container */
#header {
background:url(./pieces/headerBar.png);
position: static;
width:100%;
height:139px;
padding:0;
z-index: 10000;
}
/* Container inside the header for sorting elements */
#innerheader {
height: 139px;
width: 750px;
margin-right: auto;
margin-left: auto;
position: relative;
}
/* The following is the Nav Bar */
#navbar {
position: relative;
top: 76px;
left: 210px;
margin-left: inherit;
}
#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar ul li {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
display: inline-block;
width: 50px;
height: 20px;
margin: 10px;
}
#navbar ul li a {
text-decoration: none;
color: black;
}
#navbar ul li a:hover {
color: white;
}
/*The following is the Intertwine Banner */
#banner {
background:url(./pieces/banner.png);
position: absolute;
margin-left: 0px;
min-height: 193px;
min-width: 183px;
background-repeat: no-repeat;
}
/* Alpha Tau Omega - Theta Omega Title */
#title {
position: absolute;
background: url(./pieces/name.png);
margin-left: 190px;
min-height: 75px;
min-width: 285px;
}
/* The following are the social media icons */
#outersocial{
position:;
left:50%;
height: 139px;
width:50%;
}
#social {
position: absolute;
top: 2px;
right: 10px;
}
#social ul {
list-style-type: none;
}
#social li{
display: inline-block;
width: 36px;
height: auto;
margin: 5px;
}
#social img {
width: 36px;
height: auto;
}
/* Pagecenter is where the content will be on the web page*/
#pagecenter {
position: static;
margin-right: auto;
margin-left: auto;
height: 50px;
width: 750px;
min-height: 1000px;
background:url(./pieces/mainBG.png);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: -19px;
z-index:50
}
/* The following is the footer and its content */
#footer {
margin-top: 20px;
padding-top: 30px;
background: url(./pieces/footerbar.png);
height: 77px;
width: 100%;
margin-right: auto;
margin-left: auto;
clear: both;
bottom: 0px;
position: static;
}
#footerbanner1 {
background: url(./pieces/footerbanner.png);
position: absolute;
min-height: 95px;
min-width: 90px;
background-repeat: no-repeat;
margin-top: -30px;
left: 10px;
}
#footerbanner2 {
background: url(./pieces/footerbanner.png);
position: absolute;
min-height: 95px;
min-width: 90px;
background-repeat: no-repeat;
margin-top: -30px;
right: 10px;
}
#footercontent {
width: 100%;
height: 100%;
right: 5px;
left: 5px;
}
#footernav {
font-family: 'Quattrocento Sans', sans-serif;
position: absolute;
text-align: center;
right: 15%;
left: 15%;
}
#footernav p {
margin: 0px;
padding-right: 25%;
padding-left: 25%;
font-family: 'Quattrocento Sans', sans-serif;
color: white;
position: relative;
}
#footernav a {
font-family: 'Quattrocento Sans', sans-serif;
color: white;
}
#footernav a:hover {
color: orange;
}
最佳答案
对象只是一种特殊的数据，具有属性和方法。 对象属性可以是三种原始数据类型中的任何一种，也可以是任何抽象数据类型，例如另一个对象。对象属性通常是在对象方法内部使用的变量，但也可以是在整个页面中使用的全局可见变量。
向对象添加属性的语法是:
objectName.objectProperty = propertyValue;
示例 1。 :
person=new Object();
person.firstname="stack";
person.lastname="overflow";
person.age=50;
person.color="black";
例子2:
var message="Hello India!";
var x=message.length;
这里.length是对象消息的属性。
希望对您有所帮助。
关于html - 定位元素和调整网页宽度的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21473735/