Create a decorative division containing a border that extends all the way down to the top of the sticky

Question

Create a decorative division containing a border that extends all the way down to the top of the sticky

(Not to be found anywhere else on the internet to my knowledge, I've been searching for almost two days without success.)

I am facing an issue where a content div with a semi-transparent background and decorative border underneath the site logo does not extend down to meet the top portion of the footer. The footer is fixed to the bottom of the page using position absolute. This problematic area is on the Contact page, which has just a few lines of text and a basic contact form, resulting in insufficient content to fill the entire page.

My specific requirement is for the bordered div to cover the whole page without generating a vertical scroll bar and align seamlessly with the top of the absolutely positioned footer.

The rest of the website manages to push the footer down sufficiently due to ample content. Hence, any CSS properties can be used here, including resorting to a table hack if necessary!

JS Fiddle

header {
                height: 44px;
                background: orange;
            }
            
            article {
                box-sizing: border-box;
                border: 1px solid red; 
            }
            
            footer {
                height: 22px;
                background: green;
                position: absolute;
                bottom: 0;
            }

<body>
<header>
header
</header>
<article>
article with small amount of content<br>
<br>
and a simple contact form<br>
<br>
this red border needs to meet the top of the footer<br>
without creating a vertical scroll bar
</article>
<footer>
footer
</footer>
</body>

html css height footer article

Answer 1

Answer №1

If you want to adjust the height of your "article" using CSS3, you can set it to be 100% minus the combined heights of the header and footer elements (in this case, 66px) like so:

height:calc(100% - 66px);

Just make sure that all parent elements of the article have their heights set to 100% as well, including html and body.

Check out the updated version on JSFiddle

Answer 2

If you want to adjust the height of your "article" using CSS3, you can set it to be 100% minus the combined heights of the header and footer elements (in this case, 66px) like so:

height:calc(100% - 66px);

Just make sure that all parent elements of the article have their heights set to 100% as well, including html and body.

Check out the updated version on JSFiddle

Answer 3

Answer №2

Here is an alternative solution that utilizes the position fixed property. While I believe Alvaro Menendez's answer may be superior, this approach also achieves the desired result.

article {
  box-sizing: border-box;
  border: 1px solid red; 
  position:fixed;
  top:50px; /* size of header */
  right:0;
  bottom:30px; /* size of footer */
  left:0;
}

Click here for a demo of the code in action

Answer 4

Here is an alternative solution that utilizes the position fixed property. While I believe Alvaro Menendez's answer may be superior, this approach also achieves the desired result.

article {
  box-sizing: border-box;
  border: 1px solid red; 
  position:fixed;
  top:50px; /* size of header */
  right:0;
  bottom:30px; /* size of footer */
  left:0;
}

Click here for a demo of the code in action

Answer 5

Answer №3

To achieve your basic layout easily, you have the option to use either display:table or display:flex.

Here is the table-like version:

header {
    height: 44px;
    background: orange;
}
article {
    box-sizing: border-box;
    border: 1px solid red;
}
footer {
    height: 22px;
    background: green;
}
html, body {
    height:100%;
    width:100%;
    margin:0;
}
body {
    display:table;
    border-collapse:collapse;
}
header, article, footer {
    display:table-row;
}
article {
    height:100%;
}

    <header>header</header>
    <article>article with small amount of content
        <br>
        <br>and a simple contact form
        <br>
        <br>this red border needs to meet the top of the footer
        <br>without creating a vertical scroll bar</article>
    <footer>footer</footer>

And here is the flex version:

header {
    height: 44px;
    background: orange;
}
article {
    box-sizing: border-box;
    border: 1px solid red;
}
footer {
    height: 22px;
    background: green;
}
html {
    height:100%;
    width:100%;
   
}
body { 
    min-height:100%;
    margin:0;
    display:flex;
    flex-direction:column;
}

article {
    flex:1;
}

    <header>header</header>
    <article>article with small amount of content
        <br>
        <br>and a simple contact form
        <br>
        <br>this red border needs to meet the top of the footer
        <br>without creating a vertical scroll bar</article>
    <footer>footer</footer>

Answer 6

To achieve your basic layout easily, you have the option to use either display:table or display:flex.

Here is the table-like version:

header {
    height: 44px;
    background: orange;
}
article {
    box-sizing: border-box;
    border: 1px solid red;
}
footer {
    height: 22px;
    background: green;
}
html, body {
    height:100%;
    width:100%;
    margin:0;
}
body {
    display:table;
    border-collapse:collapse;
}
header, article, footer {
    display:table-row;
}
article {
    height:100%;
}

    <header>header</header>
    <article>article with small amount of content
        <br>
        <br>and a simple contact form
        <br>
        <br>this red border needs to meet the top of the footer
        <br>without creating a vertical scroll bar</article>
    <footer>footer</footer>

And here is the flex version:

header {
    height: 44px;
    background: orange;
}
article {
    box-sizing: border-box;
    border: 1px solid red;
}
footer {
    height: 22px;
    background: green;
}
html {
    height:100%;
    width:100%;
   
}
body { 
    min-height:100%;
    margin:0;
    display:flex;
    flex-direction:column;
}

article {
    flex:1;
}

    <header>header</header>
    <article>article with small amount of content
        <br>
        <br>and a simple contact form
        <br>
        <br>this red border needs to meet the top of the footer
        <br>without creating a vertical scroll bar</article>
    <footer>footer</footer>

Create a decorative division containing a border that extends all the way down to the top of the sticky

Answer №1

Answer №2

Answer №3

Similar questions

Using an HTML element to pass a variable into a replace function

When the collapse button is clicked, I aim to increase the top value by 100. Subsequently, upon a second click, the top value should

Utilizing CSS variables and HSLA, create a distinctive linear gradient styling

Is it possible to conceal a link once it has been visited?

Harvesting the local image file

Preventing browsing beyond subdirectories in web file management without relying on a web server

Has the Blueprint CSS framework become obsolete?

polygon with five or more sides

Embedded YouTube videos are not functioning properly in fullscreen mode

Troubleshooting WordPress <?php body_class(); ?> Problem

What is the proper way to place a newly added element using absolute positioning?

Discover how to display the loading time and memory usage of a web page on the footer using the jQuery and AngularJS library

The issue of the responsive navigation bar overlapping the header and navigation links not functioning properly

Expanding Highcharts Tooltip Size Automatically Based on Content Updates

Tips for sending data to CSS in Angular

Tips for displaying a loading indicator above a form

Header spanning the entire width with varying ends

Adding more pixels to the height of an element does not actually make it larger

Capture sound and store it in a specified destination

Retrieve several values with a limit of 1 in SQL