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

Question

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.

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: The DIVs need to stretch when the text is added too, actually that's one of my main problems.

score 1 · Accepted Answer · edited Oct 10 '16 at 14:00

1

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.

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;
}

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

edited Oct 10 '16 at 14:00

RamenChef

5,557
11
31
43

answered Oct 04 '16 at 18:02

mhatch

4,441
6
36
62

My border shouldn't be inside of .Main because it needs to stick out a little bit, just like that: http://i.imgur.com/YniYk5L.png but thank you for your answer. Sorry for weird answer at the beggining, but I thought enter wouldn't actually mean "answer" or "save". – sajmon Oct 04 '16 at 18:04
@SaJmoN Just use a negative top `top:-10px` – mhatch Oct 04 '16 at 18:10
I would also recommend giving your main a width and then positioning from the left. The way you have it now, the main will disappear if the browser is narrowed. – mhatch Oct 04 '16 at 18:12
Please, if you can, check out this thread again, I've updated it. And check out this website: sajmonsite.tk – sajmon Oct 04 '16 at 18:14
Okay, the problem is still in here, the divs still don't stretch to the bottom when the text is added. – sajmon Oct 04 '16 at 18:24
@SaJmoN Add `display: table;` to `.Main` – mhatch Oct 04 '16 at 18:36
thanks, it kinda works. Kinda because it ignores min-height so it looks silly with little text. – sajmon Oct 04 '16 at 18:47
Okay, it works now, you just need to get rid of "min" from "min-height" on the .Main. – sajmon Oct 04 '16 at 19:17
@SaJmoN I'm sure you can work out the details from here... If this answer helped you please mark it with the checkmark. Thanks. – mhatch Oct 04 '16 at 19:22
Thank you @mhatch, but I've got one more problem. You see, when there is more text in .Main than in .NavigationBar (or in reverse) then one of these divs sticks to the bottom of the page while the other one with less content is stuck where it ends, and doesn't expand to the bottom of the page. This is my last question because I haven't got any other problems with my page. EDIT: You can check out sajmonsite.tk because it shows the problem. – sajmon Oct 04 '16 at 19:32

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

1 Answers1