SaJmoN SaJmoN - 2 months ago 6
CSS Question

How to stretch div from top to the bottom of the page?

Look, I know that there are many threads with many solutions, but none of them have worked for me. I'm a begginer and I'm just starting making websites in HTML. I've tried to make a website before, but I've had the same problem. I've deleted the previous one and made a new one and I still can't solve this.
This is my code:



@font-face {
font-family: 'Jaapokki';
src: url('/fonts/jaapokki-regular.ttf');
}
@font-face {
font-family: 'BloggerSans';
src: url('/fonts/Blogger_Sans.otf');
}


html {
min-height: 100%;
overflow-y: scroll;
}

.page {
background: linear-gradient(#2d5aa4, #03637c);
min-height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}

.NavigationBar {
background: linear-gradient(to right, #636363, #4e4e4e);
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 220px;
min-height: 100%;
z-index: 2;
font-family: BloggerSans;
font-size: 1.5em;
}
.NavigationBarBorder {
background: linear-gradient(to right, #292929, #171617);
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 10px;
min-height: 100%;
z-index: 3;
}

.MainParent {
position: relative;
min-height: 100%;
}

.NavigationTop {
background: linear-gradient(#636363, #4e4e4e);
position: absolute;
right: 0px;
width: calc(100vw - 220px);
height: 75px;
z-index: 1;
font-family: Jaapokki;
font-size: 2em;
}

.Main {
background: linear-gradient(#ffffff, #e8e8e8);
position: absolute;
top: 20vh;
bottom: 0px;
right: 20vw;
left: 32vw;
min-height: 100%;
z-index: 4
}

.MainBorder {
background: linear-gradient(#f79104, #e9720d);
position: absolute;
top: calc(20vh - 10px);
right: 68vw;
width: 40px;
height: calc(80vh + 10px);
}

h1 {
font-family: 'Jaapokki';
text-align: center;
font-size: 3em;
}

.Text {
font-family: 'BloggerSans';
font-size: 2em;
}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" />
<meta name="Description" content="Typical website of the internet" />
<meta name="Keywords" content="blog,reviews,imageboard,sajmonsite" />
<title>SaJmoNSite</title>
<link rel="Stylesheet" type="text/css" href="styles/main.css" />
</head>
<body class="page">

<div class="MainParent">

<nav class="NavigationBar">
<div class="NavigationBarBorder"></div>
Table of content
</nav>


<header class="NavigationTop">
Navigation
</header>


<div class="Main">
<h1>Title</h1>
<div class="Text">
Text </br>

</div>
</div>
<div class="MainBorder"></div>

</div>

</body>
</html>





And I want the .NavigationBar to stretch from the very top of the page to the very bottom. I want the .Main and .MainBorder to do the same thing but not stretch from the top to the bottom, but just to the bottom of the page.
What I've tried and doesn't really work:


  • setting height to 100% / 100vh (method one)

  • setting div min-height to 100%, giving it position absolute and doing this

    top: 0px

    bottom: 0px



(method two)

When I do the method 1 my div isn't stretched to the bottom of the page when you can scroll the page, it is stretched to the 100% height of the browser window instead.

And when I do the method 2 the divs just disappear. I didn't forced the border to stretch so you can still see it but if I would do this it'd disappear.

And by the way, I'm just a begginer and I still don't even know basics of JavaScript, jQuery etc. so I'd like to just use pure HTML and CSS and not JavaScript and other stuff until I learn them.

EDIT:
Sorry I didn't told you about this at the beginning, but you can access my website at sajmonsite.tk.
Sorry for the .tk and the commercial because of the hosting site, but it's just for testing. And it's partially in Polish because I'm from Poland, but I'm sure you really don't care about the little text there is. It's constantly updated so you can see how the changes look.

EDIT 2:
The DIVs need to stretch when the text is added too, actually that's one of my main problems.

Answer

Try this... You can monkey with the styles to make it the way you want. I put your border inside .Main and changed html, body to height: 100%

Note: The positioning looks funky because of your use of absolute positioning for the margins of Main. I would change that. But if you copy the code to your page it might be what you're aiming for.

CSS

html, body {
  height: 100%;
}

.page {
  background: linear-gradient(#2d5aa4, #03637c);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
   background-attachment: fixed;
   position: relative;
}

.NavigationBar {
  background: linear-gradient(to right, #636363, #4e4e4e);
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  width: 220px;
  min-height: 100%;
  z-index: 2;
  font-family: BloggerSans;
  font-size: 1.5em;
}
.NavigationBarBorder {
  background: linear-gradient(to right, #292929, #171617);
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  min-height: 100%;
  z-index: 3;
}

.MainParent {
  position: relative;
  min-height: 100%;
}

.NavigationTop {
  background: linear-gradient(#636363, #4e4e4e);
  position: absolute;
  left: 220px;
  width: calc(100vw - 220px);
  height: 75px;
  z-index: 1;
  font-family: Jaapokki;
  font-size: 2em;
}

.Main {
  background: linear-gradient(#ffffff, #e8e8e8);
  position: absolute;
  top: 20vh;
  bottom: 0px;
  width: calc(100vw - 440px); /* set your width */
  left: 220px;
  margin-left: 90px; /*set your margin here */
  min-height: 100%;
  z-index: 4;
  padding-left: 40px;
}

.MainBorder {
  background: linear-gradient(#f79104, #e9720d);
  position: absolute;
  top: -10px; 
  left: 0;
  width: 40px;
  min-height: 100%;
}

h1 {
  font-family: 'Jaapokki';
  text-align: center;
  font-size: 3em;
}

.Text {
  font-family: 'BloggerSans';
  font-size: 2em;
}

HTML

<body class="page">

<div class="MainParent">

  <nav class="NavigationBar">
    <div class="NavigationBarBorder"></div>
    Table of content
  </nav>

  <header class="NavigationTop">
    Navigation
  </header>

  <div class="Main">
    <h1>Title</h1>
    <div class="Text">
      Text </br>
    </div>
    <div class="MainBorder"></div>
  </div>

</div>

</body>