3

I am making my first web application. It is my first time working with html/css/js. This seems to be a common question/issue with css, but I have trouble understanding/making the solution work. This is the closest I've gotten.

I am struggling to make the app (specifically wrapper or body) encompass only the height of the page (no more or less).

If there is little content, content doesn't extend all the way down and the footer is at the middle of the page. Although, adding height: 100%; to html seems to fix this.

If I add a lot of lines to calendar or sidebar, a scroll bar is added to the whole page instead of only calendar or sidebar. height: 100%; in html doesn't seem to fix this.

The width for content seems to work well.

I have tried changing the height for body and wrapper but it doesn't seem to do anything?

Adding overflow: hidden; to body doesn't seem to work either.

Help is appreciated. Thank you.

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

#wrapper {
  display: flex;
  flex-flow: column;
  height: 100%;
}

header {
  text-align: left;
  flex: 0 0 auto;
  padding: 20px;
}

#content {
  display: flex;
  flex-flow: row;
  width: 100%;
  flex: 1 1 auto;
}

#sidebar {
  float: left;
  overflow-y: auto;
  padding: 20px;
  flex: 0 0 20%;
  background-color: #00e7eb;
}

#calendar {
  float: left;
  overflow-y: auto;
  padding: 20px;
  flex: 1 1 auto;
  background-color: #c8eed6;
}

footer {
  text-align: center;
  flex: 0 0 auto;
  padding: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Journal</title>

  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <div id="wrapper">
    <header>
      <h1 id="currentCalendar">Quarter</h1>
    </header>

    <div id="content">
      <div id="sidebar">
        <h4>Calendars</h4>
        <button>+ Add Calendar</button>

        <h4>Classes</h4>
        <button>+ Add Class</button>

        <h4>Tags</h4>
        <button>+ Add Tags</button>
      </div>

      <div id="calendar">
        <p>No calendar. Click '+ Add Calendar' to make new calendar.</p>
      </div>
    </div>

    <footer>
      <p>dg</p>
      <button>Donate</button>
    </footer>
  </div>

</body>

</html>
dgtz
  • 51
  • 3

3 Answers3

1

I would go with min-height: 100vh;. Should be noted though, 100vh can be tricky when it comes to mobile depending on your design. You can also try

html, body { min-height: 100%; }

Dejan.S
  • 18,571
  • 22
  • 69
  • 112
0

Try adding height: 100vh; to the target element.

Matt Komarnicki
  • 5,198
  • 7
  • 40
  • 92
0

in CSS height % values only work if the parent container has a set height. So if you want to adjust the main body to 100% display height you can do:

    body{
      height: 100vh; /*viewport-height=100% of screen height*/
   }

and then you can set the first child of that to 100%

Warden330
  • 999
  • 1
  • 5
  • 11