頁腳外部網格佈局後

我真的很新開發網站。而且我在某處讀到網格基本上是簡單響應式設計的未來，所以我正在嘗試使用它。現在我無法弄清楚包裝類以外的元素如何跟隨第一列的最大寬度。頁腳外部網格佈局後

下面是HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>GRID</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    <link rel="stylesheet" type="text/css" href="userpage.css" /> 

</head> 
<body class= 'wrapper'> 

    <div class= 'box header'> 
     <img src=''> 
     <ul class= 'nav-ul'> 
      <li class= 'nav-li'><a href='#'>Home</a></li> 
      <li class= 'nav-li'><a href='#'>About Us</a></li> 
      <li class= 'nav-li'><a href='#'>Contact</a></li> 
     </ul> 
    </div> 
    <!-- End of header --> 

    <div class= 'box left'> 
     box left 
    </div> 
    <div class= 'box right'> 
     box right 
    </div> 
    <div class= 'box contact'> 
     contact 
    </div> 
</body> 
<!-- End of Body --> 

<footer> 
    This is the footer 

</footer> 

</html>

這裏是CSS：

*{ 
    padding: 0px; 
    margin: 0px; 
} 


.wrapper { 
    display: grid; 
    grid-template-columns: 50% 50%; 
    grid-template-areas: 
     "header header" 
     "body-l body-r" 
     "contact contact"; 
    margin: 0px; 
    padding: 0px; 
} 

.box { 
    border-style: dotted; 
    border-color: red; 
    padding: 10px; 
} 

.header { 
    grid-area: header; 
    background-color: #1df9b7; 
} 

.left { 
    grid-area: body-l; 
} 

.right { 
    grid-area: body-r; 
} 

.contact { 
    grid-area: contact; 
} 

.nav-ul { 
    list-style: none; 
    float: right; 
} 

.nav-li { 
    float: left; 
    padding-right: 0.7em; 
} 

.nav-li a { 
    text-decoration: none; 
    color: white; 
} 

footer { 
    background-color: #00704e; 
}

什麼，我想是頁腳，以填補該網站的其餘區域。

來源

2017-08-04 LRD27

首先您需要了解如何使用<body>標籤。

HTML <body>元素表示HTML文檔的內容。

只有<body>標記內的元素纔會實際顯示在頁面上。您可以使用<main>標籤來包裝頁面的主要內容。

接下來，你可以使身體佔據屏幕的整個高度，並給它的背景顏色：

body { 
    height: 100vh; 
    background-color: #00704e; 
}

由於頁腳是最後一個元素，使用相同的背景顏色，它將會出現，好像它正在填充剩餘的區域。

*{ 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
body { 
 
    height: 100vh; 
 
    background-color: #00704e; 
 
} 
 

 

 
.wrapper { 
 
    display: grid; 
 
    grid-template-columns: 50% 50%; 
 
    grid-template-areas: 
 
     "header header" 
 
     "body-l body-r" 
 
     "contact contact"; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background-color: #fff; 
 
} 
 

 
.box { 
 
    border-style: dotted; 
 
    border-color: red; 
 
    padding: 10px; 
 
} 
 

 
.header { 
 
    grid-area: header; 
 
    background-color: #1df9b7; 
 
} 
 

 
.left { 
 
    grid-area: body-l; 
 
} 
 

 
.right { 
 
    grid-area: body-r; 
 
} 
 

 
.contact { 
 
    grid-area: contact; 
 
} 
 

 
.nav-ul { 
 
    list-style: none; 
 
    float: right; 
 
} 
 

 
.nav-li { 
 
    float: left; 
 
    padding-right: 0.7em; 
 
} 
 

 
.nav-li a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
footer { 
 
    background-color: #00704e; 
 
}

<main class= 'wrapper'> 
 

 
    <div class= 'box header'> 
 
     <img src=''> 
 
     <ul class= 'nav-ul'> 
 
      <li class= 'nav-li'><a href='#'>Home</a></li> 
 
      <li class= 'nav-li'><a href='#'>About Us</a></li> 
 
      <li class= 'nav-li'><a href='#'>Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    <!-- End of header --> 
 

 
    <div class= 'box left'> 
 
     box left 
 
    </div> 
 
    <div class= 'box right'> 
 
     box right 
 
    </div> 
 
    <div class= 'box contact'> 
 
     contact 
 
    </div> 
 
</main> 
 
<!-- End of Body --> 
 

 
<footer> 
 
    This is the footer 
 

 
</footer>

來源

2017-08-04 01:09:02

那好吧，謝謝。但是，我如何讓頁腳填充頁面的高度？ – LRD27

最簡單的方法是給身體一個100vh的高度，並給它一個你想要的頁腳背景顏色。 –

查看更新後的代碼片段。（請注意，我還爲內容添加了背景色以將其與頁腳分開。） –

頁腳外部網格佈局後

回答

相關問題