CODEWITHSUNDEEP
htmlcss
LRD27
LRD27

Reputation: 98

Footer outside body following grid layout

i'm really new at developing websites. And i read somewhere that grids are basically the future of simple responsive designs, so i am trying to use it. Right now i can't figure out how an element outside the wrapper class is following the first column maximum width.

Here is the 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>

Here is the 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;
}

What i would like is the footer to fill the remaining area of the website.

Upvotes: 1

Views: 3185

Answers (1)

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

First you need to understand how to use the <body> tag.

The HTML <body> Element represents the content of an HTML document.

Only elements inside the <body> tag will actually be displayed on the page. You can use the <main> tag to wrap the main content of the page.

Next, you can make the body take up the entire height of the screen, and give it the desired background color:

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

Since the footer is the last element, with the same background color, it will appear as though it's filling the remaining area.

*{
    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>

Upvotes: 1

Related Questions