CODEWITHSUNDEEP
htmlcss
ThatGuy
ThatGuy

Reputation: 133

CSS element doesn't cover 100% of the page

First and foremost, this IS a university assignment, as basic as it might seem, I've been trying to solve this for the last 3 hours, and nothing seems to be working.

So I've got side navigation bar set to height: 100; However, it ends close to the bottom of the page for no apparent reason. Resizing the window enough pushes the navigation bar past the footer, which leaves the footer hanging right below the last element on the page

HTML:

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" media="screen and (max-width: 850px)" href="css/style2.css" />
    <link rel="stylesheet" type="text/css" media="screen and (max-width: 450px)" href="css/style3.css" />
    <!-- <script src="js/main.js"></script> -->
    <title>CS15020: Web Development Tools</title>
</head>

<body>
<header class="text element-color">
    <h1>David’s assignment 2 for CS15020</h1>
</header>

<nav>
    <a href="">Email me</a><br />
    <a href="prac2.html">My CV (no CSS)</a><br />
    <a href="prac2_centered.html">My CV (with CSS)</a><br />
    <a href="..">Homepage</a><br />
    <a href="" target="_blank">My website</a><br />
    <br /> <!-- dirty way of making media queries work -->
    <a href="http://validator.w3.org/check?uri=referer">Valid HTML5</a><br />
    <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
</nav>

<main>
<br />
Please enter your details below:
<form id="userDetails" action="/">
<p>
<input type="text" id="users_name" placeholder="Name" />
<br />
<select name="grade">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<input type="button" name="send" onclick="process()" value="Submit" />
</form>

<p id="out"></p>
<img src="images/web.jpg" alt="web image"></img>
<p id="dateModified"></p>

<script>
function process() {
        var txt = "";
        var hoursOut = "";
        var name = document.getElementById("users_name").value;

        switch(document.forms['userDetails'].grade.selectedIndex){
        case 0:
            txt="1/5 (20%); Wow you must really suck at life...";
            break;
        case 1:
            txt="2/5 (40%); Meh...";
            break;
        case 2: 
            txt="3/5 (60%); Well... at least you know something, right?";
            break;
        case 3:
            txt="4/5 (80%); It's getting good!";
            break;
        case 4:
            txt="5/5 (100%); Awesome bro, keep it goin'!";
            break;
        }

    var hours = (new Date()).getHours();

    if (hours >= 12 && hours < 18) {
    hoursOut = "afternoon";
    } else if (hours < 12 && hours >= 5) {
    hoursOut = "morning";
    } else if (hours >= 18 && hours <= 23) {
    hoursOut = "evening";
    } else hoursOut = "night";


    var finalOut = document.getElementById("out");
    finalOut.innerHTML = "Good " + hoursOut + ", " + name + "! You expected grade " + txt;
    }

    var mod = new Date(document.lastModified);
    var modFormatted = mod.toLocaleString();
    document.getElementById("dateModified").innerHTML = "Last modified: " + modFormatted;
</script>
</main>

<div id="footer" class="text element-color">
    CS15020 - WEB DEVELOPMENT TOOLS
</div>
</body>

CSS:

main {
    margin-left: 15%;
    min-height:100%;
    margin-bottom: 1%;
    overflow: hidden;
}

body
{
    margin: 0;
    background-color: #F8E0E0;
}

.text {
    font-family: Arial, Helvetica, sans-serif;
}

.element-color {
    color: #818181;
}

header {
    background-color: #111;
    width: 100%;
}

header h1 {
    margin: 0;
    padding-top: 2px;
    padding-bottom: 4px;
    padding-left: 5px;
}

nav {
    position: absolute;
    display: block;
    padding-top: 5px;
    padding-left: 0;
    width: 12%;
    height: 100%;
    background-color: #111;
    border-top: 2px solid #818181;
}

nav a {
    text-decoration: none;
    color: #818181;
    padding: 6px 8px 6px 16px;
}

nav a:hover{
    color: white;
}

img {
    max-width: 100%;
    height: auto;
}

#footer { 
    width: 100%;
    position: relative;
    bottom: 0;
    text-align: center;
    margin: 0;
    background-color: #111;
    color: #818181;

}

CSS #2:

main {
    margin-left: 140px;
    margin-bottom: 1%;
    overflow: hidden;
}

body
{
    margin:0;
    background-color: #F8E0E0;
}

.text {
    font-family: Arial, Helvetica, sans-serif;
}

.element-color {
    color: #818181;
}

header {
    background-color: #111;
    width: 100%;
    /*border-bottom: 2px solid white;*/
}

header h1 {
    margin: 0;
    padding-top: 2px;
    padding-bottom: 4px;
    padding-left: 5px;
    font-size: 100%;
}

nav {
    position: absolute;
    padding-top: 5px;
    padding-left: 0%;
    width: 16%;
    height: 100%;
    background-color: #111;
    border-top: 2px solid #818181;
}

nav a {
    text-decoration: none;
    font-size: 85%;
    color: #818181;
    padding: 6px 8px 6px 16px;
}

nav a:hover{
    color: white;
}

img {
    max-width: 100%;
    height: auto;
}

#footer { 
    width: 100%;
    position: relative;
    bottom: 0;
    text-align: center;
    margin: 0;
    background-color: #111;
    color: #818181;

}

CSS #3:

main {
    z-index: 1;
    margin-left: 5%;
    padding-top: 15%;
    margin-bottom: 1%;
    overflow: hidden;
}

body
{
    margin:0;
    background-color: #F8E0E0;
}

.text {
    font-family: Arial, Helvetica, sans-serif;
}

.element-color {
    color: #818181;
}

header {
    background-color: #111;
    /*border-bottom: 2px solid white;*/
}

header h1 {
    margin: 0;
    padding-top: 2px;
    padding-bottom: 4px;
    padding-left: 5px;
    font-size: 100%;
}

nav {
    z-index: 2;
    position: fixed;
    overflow: hidden;
    display: block;
    padding-bottom: 5px;
    width: 100%;
    height: auto;
    border-top: 2px solid #818181;
}

nav a {
    text-decoration: none;
    font-size: 85%;
    /*color: #818181;*/
    padding: 6px 8px 6px 16px;
}

br { 
    display: none;
}

nav a:hover{
    color: white;
}

img {
    max-width: 100%;
    height: auto;
}

#footer { 
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
    margin: 0;
    background-color: #111;
    color: #818181;

}

CSS sheets #2 and #3 and purely just for media queries

UPDATE: You can actually see the whole thing here; I have now changed the height to fixed.

Upvotes: 1

Views: 70

Answers (3)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Solved the scrollable content problem by Flex.

.outer {
  display: flex;
}

.nav {
  flex: 1;
  background: black;
}

.main {
  flex: 4;
}

main {
  margin-left: 15%;
  min-height: 100%;
  margin-bottom: 1%;
  overflow: hidden;
}

body {
  margin: 0;
  background-color: #F8E0E0;
}

.text {
  font-family: Arial, Helvetica, sans-serif;
}

.element-color {
  color: #818181;
}

header {
  background-color: #111;
  width: 100%;
  height: 40px;
}

header h1 {
  margin: 0;
  padding-top: 2px;
  padding-bottom: 4px;
  padding-left: 5px;
}

nav a {
  text-decoration: none;
  color: #818181;
}

nav a:hover {
  color: white;
}

img {
  max-width: 100%;
  height: auto;
}

#footer {
  width: 100%;
  bottom: 0;
  text-align: center;
  margin: 0;
  background-color: #111;
  color: #818181;
}
<body>
  <header class="text element-color">
    <h1>David’s assignment 2 for CS15020</h1>
  </header>
  <div class="outer">
    <div class="nav">
      <nav>
        <a href="">Email me</a><br />
        <a href="prac2.html">My CV (no CSS)</a><br />
        <a href="prac2_centered.html">My CV (with CSS)</a><br />
        <a href="..">Homepage</a><br />
        <a href="" target="_blank">My website</a><br />
        <br />
        <!-- dirty way of making media queries work -->
        <a href="http://validator.w3.org/check?uri=referer">Valid HTML5</a><br />
        <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
      </nav>
    </div>
    <div class="main">
      <main>
        <br /> Please enter your details below:
        <form id="userDetails" action="/">
          <p>
            <input type="text" id="users_name" placeholder="Name" />
            <br />
            <select name="grade">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>

            <input type="button" name="send" onclick="process()" value="Submit" />
        </form>

        <p id="out"></p>
        <img src="images/web.jpg" alt="web image">
        <p id="dateModified"></p>

        <br /> Please enter your details below:
        <form id="userDetails" action="/">
          <p>
            <input type="text" id="users_name" placeholder="Name" />
            <br />
            <select name="grade">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>

            <input type="button" name="send" onclick="process()" value="Submit" />
        </form>

        <p id="out"></p>
        <img src="images/web.jpg" alt="web image">
        <p id="dateModified"></p>

        <br /> Please enter your details below:
        <form id="userDetails" action="/">
          <p>
            <input type="text" id="users_name" placeholder="Name" />
            <br />
            <select name="grade">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>

            <input type="button" name="send" onclick="process()" value="Submit" />
        </form>

        <p id="out"></p>
        <img src="images/web.jpg" alt="web image">
        <p id="dateModified"></p>

        <br /> Please enter your details below:
        <form id="userDetails" action="/">
          <p>
            <input type="text" id="users_name" placeholder="Name" />
            <br />
            <select name="grade">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>

            <input type="button" name="send" onclick="process()" value="Submit" />
        </form>

        <p id="out"></p>
        <img src="images/web.jpg" alt="web image">
        <p id="dateModified"></p>

        <br /> Please enter your details below:
        <form id="userDetails" action="/">
          <p>
            <input type="text" id="users_name" placeholder="Name" />
            <br />
            <select name="grade">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>

            <input type="button" name="send" onclick="process()" value="Submit" />
        </form>

        <p id="out"></p>
        <img src="images/web.jpg" alt="web image" />
        <p id="dateModified"></p>
      </main>
    </div>
  </div>
  <div id="footer" class="text element-color">
    CS15020 - WEB DEVELOPMENT TOOLS
  </div>
</body>

Upvotes: 1

Jason
Jason

Reputation: 761

Try to change nav's position from absolute to fixed in CSS (first one). It worked for me.

EDITED

 header {
    background-color: #111;
    width: 100%;
    position: fixed;
}

nav {
    position: fixed;
    display: block;
    padding-top: 5px;
    padding-left: 0;
    width: 12%;
    height: 100%;
    margin-top: 42px;
    background-color: #111;
    border-top: 2px solid #818181;
}

Upvotes: 1

AeglosGreenleaf
AeglosGreenleaf

Reputation: 45

A fixed position might work better if there's another element pushing it around, although this might not work well with your desired end product.

Compatibility is not as good, but you could try setting height to 100vh. This will set it to 100 1/100ths of the user's viewport which would be the whole screen.

Upvotes: 0

Related Questions