Organize icons within a container that spans the entire height

Question

Organize icons within a container that spans the entire height

I am looking to organize multiple icons within a container that spans the entire height of the website, rather than just the viewport.

Currently, I am only able to achieve the height of the viewport using the following code:

.full-container {
    position: absolute;
    height: 100%;
    display: block;
    top: 0;
    bottom: 0;
    
    /* for example */
    width: 100%;
    background: red; 
}

<div class="full-container"></div>

Is there a method to obtain the height of the entire website?

Shown below is an example of my concept:

https://i.sstatic.net/aAk33.jpg

The white area represents what is visible on the screen in the browser. The grey area represents the remainder of the site. I aim to create a DIV that covers the full height of the page (depicted in yellow).

html css

Answer 1

Answer №1

One challenge of making a div 100% is that it will only fill the space left by surrounding elements. Typically, using position absolute should resolve this issue, but have you considered adding the following CSS:

/* CSS */
* {
    margin: 0;
    padding: 0;
}

Additionally, are you utilizing box-sizing in your styling? This could potentially be causing the problem.

I'm curious about your end goal with this div. Are you trying to achieve something specific?

body {background-color: red;}
main {
  width: calc(100% + 100px);
  background-color: blue;
  position: absolute;
  left: -100px;
  top: 0;
}

<body>
  <main><p>test</p></main>
</body>

Edit: It appears that what you're attempting is causing some glitches. The 100% may not be behaving as expected and instead returning the page width value.

Answer 2

One challenge of making a div 100% is that it will only fill the space left by surrounding elements. Typically, using position absolute should resolve this issue, but have you considered adding the following CSS:

/* CSS */
* {
    margin: 0;
    padding: 0;
}

Additionally, are you utilizing box-sizing in your styling? This could potentially be causing the problem.

I'm curious about your end goal with this div. Are you trying to achieve something specific?

body {background-color: red;}
main {
  width: calc(100% + 100px);
  background-color: blue;
  position: absolute;
  left: -100px;
  top: 0;
}

<body>
  <main><p>test</p></main>
</body>

Edit: It appears that what you're attempting is causing some glitches. The 100% may not be behaving as expected and instead returning the page width value.

Organize icons within a container that spans the entire height

Answer №1

Similar questions

Ways to boost an array index in JavaScript

Panel div fails to show visNetwork visualization

Exploring the possibilities of ReactJS and the sleek design of

Personalized Bootstrap 4 grid system

Remove identical options from the dropdown menu

Enhance Fullcalendar by incorporating an HTML tag alongside the "titleformat" option

Tips for placing an icon within an input field

What is the best way to paste plain text into a Textarea without any formatting?

Activate a click event on an element using Simple HTML DOM

Problems with form functionality in React component using Material UI

JavaScript function to toggle visibility and scroll back to top of the page

Ways to align anchor tags in the middle of a DIV element?

Stop the automatic hiding of the sticky header when reaching the bottom of the page

Ion-List seamlessly integrates with both ion-tabs and ion-nav components, creating a cohesive and dynamic user interface

Creating a function within document.ready using jQuery is a common practice for ensuring that

Contrasting .queue() with jquery.queue()

Photo browser with RTL support and customized previous/next buttons using Framework7

Ensuring the security of updated data

Creating a dynamic mouse trail effect using CSS and JavaScript without compromising element clickability

Display a specific section depending on the user's input by utilizing either ng-if or ng-show