Unfixed body border encircling my entire webpage

Question

Unfixed body border encircling my entire webpage

My goal is to have a border around all the content on my page, but I am facing issues with the positioning of the bottom border. I want it to always be at the bottom of the page.

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

body {
  margin: 0;
  padding: 45px;
  min-height: 100%;
  z-index: 1;
}

#barTop,
#barLeft,
#barBottom,
#barRight {
  display: block;
  position: absolute;
  background-color: #f8ee53;
  z-index: 2;
}

#barTop,
#barBottom {
  right: 20px;
  left: 20px;
  height: 25px;
}

#barTop {
  top: 20px;
}

#barBottom {
  bottom: 20px;
}

#barLeft,
#barRight {
  top: 20px;
  bottom: 20px;
  width: 25px;
}

#barLeft {
  left: 20px;
}

#barRight {
  right: 20px;
}

<div id="barTop"></div>
<div id="barRight"></div>
<div id="barBottom"></div>
<div id="barLeft"></div>

Issue: The border on my page does not encompass all of the content. https://i.sstatic.net/2f8Gk.png

html css

Answer 1

Answer №1

discard this :

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

replace it with the following:

body {
    margin: 0;
    padding: 45px;
    min-height: 100%;
    z-index: 1;
}

#barTop, #barLeft, #barBottom, #barRight {
    display: block;
    position: absolute;
    background-color: #f8ee53;
    z-index: 2;
}
#barTop, #barBottom {
    right: 20px;
    left: 20px;
    height: 25px;
}
#barTop {
top: 20px;
}
#barBottom {
    bottom: 20px;
}
#barLeft, #barRight {
    top: 20px;
    bottom:20px;
    width: 25px;
}
#barLeft {
    left: 20px;
}

#barRight {
    right: 20px;
}

Answer 2

discard this :

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

replace it with the following:

body {
    margin: 0;
    padding: 45px;
    min-height: 100%;
    z-index: 1;
}

#barTop, #barLeft, #barBottom, #barRight {
    display: block;
    position: absolute;
    background-color: #f8ee53;
    z-index: 2;
}
#barTop, #barBottom {
    right: 20px;
    left: 20px;
    height: 25px;
}
#barTop {
top: 20px;
}
#barBottom {
    bottom: 20px;
}
#barLeft, #barRight {
    top: 20px;
    bottom:20px;
    width: 25px;
}
#barLeft {
    left: 20px;
}

#barRight {
    right: 20px;
}

Answer 3

Answer №2

To resolve this issue, simply include the following code snippet within your existing body selector:

body {
    box-sizing: border-box;
}

I have created a jsfiddle example to showcase this solution, featuring a black background on the body for better visualization:

Check out the JS Fiddle

Answer 4

To resolve this issue, simply include the following code snippet within your existing body selector:

body {
    box-sizing: border-box;
}

I have created a jsfiddle example to showcase this solution, featuring a black background on the body for better visualization:

Check out the JS Fiddle

Answer 5

Answer №3

The issue stems from the padding applied to the body element. The height calculation does not take this into consideration when set to 100%. To resolve this, you can either remove the padding or follow mtr web's suggestion of adding box-sizing: border-box; to the CSS. Try running the snippet below to see the solution in action.

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

body {
  margin: 0;
  padding: 45px;
  min-height: 100%;
  z-index: 1;
  box-sizing: border-box; 
}

#barTop,
#barLeft,
#barBottom,
#barRight {
  display: block;
  position: absolute;
  background-color: #f8ee53;
  z-index: 2;
}

#barTop,
#barBottom {
  right: 20px;
  left: 20px;
  height: 25px;
}

#barTop {
  top: 20px;
}

#barBottom {
  bottom: 20px;
}

#barLeft,
#barRight {
  top: 20px;
  bottom: 20px;
  width: 25px;
}

#barLeft {
  left: 20px;
}

#barRight {
  right: 20px;
}

<div id="barTop"></div>
<div id="barRight"></div>
<div id="barBottom"></div>
<div id="barLeft"></div>

Answer 6

The issue stems from the padding applied to the body element. The height calculation does not take this into consideration when set to 100%. To resolve this, you can either remove the padding or follow mtr web's suggestion of adding box-sizing: border-box; to the CSS. Try running the snippet below to see the solution in action.

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

body {
  margin: 0;
  padding: 45px;
  min-height: 100%;
  z-index: 1;
  box-sizing: border-box; 
}

#barTop,
#barLeft,
#barBottom,
#barRight {
  display: block;
  position: absolute;
  background-color: #f8ee53;
  z-index: 2;
}

#barTop,
#barBottom {
  right: 20px;
  left: 20px;
  height: 25px;
}

#barTop {
  top: 20px;
}

#barBottom {
  bottom: 20px;
}

#barLeft,
#barRight {
  top: 20px;
  bottom: 20px;
  width: 25px;
}

#barLeft {
  left: 20px;
}

#barRight {
  right: 20px;
}

<div id="barTop"></div>
<div id="barRight"></div>
<div id="barBottom"></div>
<div id="barLeft"></div>

Unfixed body border encircling my entire webpage

Answer №1

Answer №2

Answer №3

Similar questions

Center the background image and adjust it vertically up or down as needed

Develop a dynamic animation using gradient and opacity properties

What methods does DevTools offer for identifying the font used in an SVG?

Darkening the background of HTML and CSS text to black

How can I trigger a function by clicking on a link that was generated dynamically with jQuery?

Separate Your Navbar with Bootstrap 4 Separators

Find a solution for displaying custom product badges

Adding spacing breakpoints in Material-UI 5 sx properties

Manipulate your table data with jQuery: add, update, delete, and display information with ease

Avoid Scroll Below Stuck Navigation

Incorporating various elements within a single column of a table

Having Trouble with the Background Video Scaling on My HTML Bootstrap Page for Mobile Devices

Displaying an array of data from a list of arrays in AngularJS' session storage

Enhancing VueDraggable (sortable.js) with drag out feature

Highlighted top and bottom borders accenting a vertical list

Removing lines of text from the output of a JavaScript retrieval

Click the button to add content to the top section of the div using jQuery

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

Incorporating a hamburger symbol into an established menu for easy navigation

Achieving uniform distribution of items within a flex container