Question

我的头衔基本上都说明了一切。由于某种原因，我不能让它拉伸整个页面。我是新手，所以任何帮助都会很棒。

这是我的代码html。我被告知需要从朋友那里改变宽度和边距，我尝试这样做但得到的结果相同。

.maincontainer{
    	width: 990px;
    	margin: 0 auto;
    }
    
    body {
    	background: #B2906F;
    	font-family: arial;
    	margin: 0;
    	height: 100%;
    }
    
    .picture{
    	display: inline;
    	margin: 0;
    	padding: 0;
    	position: fixed;
    	z-index: -1;
    	background-size: 100%
    }
    
    .button{
    	padding: 10px 15px;
    	text-decoration: none;
    	border-radius: 5px;
    	background-color: #05280c
    }
    .button-primary:hover {
    	background-color: #05370c
    }
    
    h1	{
    	display: inline;
    	margin: 0;
    	background-color: #2c421f;
    	padding: 5px;
    	position: absolute;
    }
    
    ul{
    	margin: 0;
    	display: inline;
    	padding: 0px 0px 0px 250px;
    }
    ul li {
    	display: inline-block;
    	list-style-type: none;
    	padding: 15px 10px;
    	color: #050c0c;
    	margin: 0;
    	border-radius: 5px;
    }
    
    ul li a {
    	color: black;
    }
    
    footer{
    	clear: both;
    }
    
    nav {
    	color: 
    	height: 40px;
    	margin: 0;
    	background-color: #2c421f;
    }

    <!doctype html>
    <div class="maincontainer">
    <html>
    	<head>
    		<title>NWWolfPack</title>
    		<link href="main.css" rel="stylesheet" />
    	</head>
    	
    	<body>
    		<h1>NW Wolf Pack</h1>
    		<div class="picture"><img src="camo.jpg" width="1000" height="150">
        	<header>	
    			<nav>
    				<ul>
    					<li class="button"><strong>Home</strong></li>
    					<li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li>
    					<li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li>
    					<li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li>
    				</ul>
    			</nav>
    		</header>
    	</body>
    	
    	
    	<footer>2017 Dillan Hall</footer>
    </html>

Answer 1

按照结构良好的顺序排列html并制作with 100%的容器div然后它将占据整个宽度：下面的演示

＆＃13;

html,
body{
  height: 100%;
}
body {
    background: #B2906F;
    font-family: arial;
    margin: 0;
}
.maincontainer{
    width: 100%;
    margin: 0 auto;
}


.picture{
    display: inline;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: -1;
    background-size: 100%;
    width: 100%;
}

.button{
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    background-color: #05280c
}
.button-primary:hover {
    background-color: #05370c
}

h1  {
    display: inline;
    margin: 0;
    background-color: #2c421f;
    padding: 5px;
    position: absolute;
}

ul{
    margin: 0;
    display: inline;
    padding: 0px 0px 0px 250px;
}
ul li {
    display: inline-block;
    list-style-type: none;
    padding: 15px 10px;
    color: #050c0c;
    margin: 0;
    border-radius: 5px;
}

ul li a {
    color: black;
}

footer{
    clear: both;
}

nav {
    color: 
    height: 40px;
    margin: 0;
    background-color: #2c421f;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>NWWolfPack</title>
    <link href="main.css" rel="stylesheet" />
</head>

<body>
    <div class="maincontainer">
        <h1>NW Wolf Pack</h1>
        <div class="picture"><img src="camo.jpg" width="1000" height="150">
            <header>
                <nav>
                    <ul>
                        <li class="button"><strong>Home</strong></li>
                        <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li>
                        <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li>
                        <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li>
                    </ul>
                </nav>
            </header>
        </div>
        <footer>2017 Dillan Hall</footer>
</body>

</html>

＆＃13;

Answer 2

您的HTML代码结构不正确，我已更正下面的HTML结构：

<!doctype html>
<html>
    <head>
        <title>NWWolfPack</title>
        <link href="main.css" rel="stylesheet" />
    </head>

    <body>

     <div class="maincontainer">
      <div class="picture"><img src="camo.jpg" height="150" style="width: 100%" />
        <header>    
          <nav>
            <ul>
                <li class="button"><strong>Home</strong></li>
                <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li>
                <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li>
                <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li>
            </ul>
          </nav>
        </header>
      </div>
     </div>
    </body>
    <footer>2017 Dillan Hall</footer>
</html>

要使屏幕完整尺寸，您需要修改 CSS 代码 .maincontainer ，它将解决您的问题。

.maincontainer{
    width: 100%;
    margin: 0 auto;
}

填写整个页面时出现问题

2 个答案: