css填充整個頁面時出現問題

我的標題基本上是這麼說的。出於某種原因，我無法讓它伸展整個頁面。我對此很陌生，所以任何幫助都會很棒。css填充整個頁面時出現問題

這是我的代碼的HTML。我被告知，寬度和邊距需要從一個朋友改變，我嘗試這樣做，但得到了相同的結果。

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

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

來源

2017-02-10 Dillan Hall

''div class =「maincontainer」>'應該在''之後。 ''是最外面的標籤。 html只能包含頭部和身體。 ''div class =「maincontainer」>''width：990px;'，所以頁面不會超過990px。 – Banzay

安排結構良好秩序的HTML和使with 100%的div容器，然後將需要的整個寬度：演示下面

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; 
 
}

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

來源

2017-02-10 06:16:24

謝謝。我試過了，它只是把它移到左邊，我甚至把你盒子裏的所有代碼都複製過來，然後試着運行它。它很奇怪，因爲當我在網站上運行代碼時，它說它應該起作用。 –

您的HTML代碼結構不正確，我已更正了t他以下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; 
}

來源

2017-02-10 06:17:09

我試過了，它只是把它移到左邊。感謝您的迴應 –

css填充整個頁面時出現問題

回答

相關問題