CODEWITHSUNDEEP
htmlcssstretching
sajmon
sajmon

Reputation: 141

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.

What I've tried and doesn't really work:

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

Upvotes: 0

Views: 2670

Answers (1)

mhatch
mhatch

Reputation: 4605

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>

Upvotes: 1

Related Questions