Covering the entire screen, the Div element takes up the entirety of

Just like with other pages, the main div always takes up the entire screen visible to the user. As they scroll down, another div becomes visible: example1 , example2

Regardless of the screen size, the main div will always fill the space visible to the user.

To test this, I used the code below:

<div style="background:yellow; position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; float:left;">
    This is my Section!
</div>

Using this code, a large yellow background with text fills the entire browser area. If I wanted to add another div beneath this one, how could I achieve that? Is it possible with CSS alone or would I need to use JavaScript?

javascripthtmlcss

Answer №1

It's possible to achieve this without using javascript by utilizing pure CSS alone.

By employing the vh units, you can set a margin-top on the subsequent container in the following manner:

#content { margin-top: 100vh;}

The benefit of this approach is that it's completely responsive, regardless of how you adjust the dimensions (height or width).

Take a look here

Answer №2

Upon reviewing your division more accurately, the following code snippet was identified:

top: 0; bottom: 0; right: 0;

This code is responsible for the division occupying the entire screen as all values are set to 0, leaving no space between them.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Allowing access from different domains when using Angular.js $http

Whenever I encounter a CORS issue while developing a webapp, my go-to solution is to brew some coffee. However, after struggling with it for some time, I am unable to resolve the problem this time and need assistance. Below is the client-side code snippet ...

javascriptangularjscors

iOS 8 home screen web apps with status bar overlay and footer bar integration

After installing a web application to 'home' and working with it, I noticed that a recent update to iOS has made the usual black status bar transparent and float above the web content below. In addition, there is an unseen horizontal bar at the ...

cssangularjssafariios8statusbar

Generate and save a document

Upon clicking the button, I am trying to generate a CSV file and download it right away. My current approach is as follows: html: <a class="btn btn-primary" @click="downloadCsv">Download CSV</a> <a v-if="fileObjectUrl !== null" ref="down ...

javascriptvue.js

Conceal elements that are overflowing slightly

I need help coming up with a purely CSS solution to hide div 3, which has extended beyond its container. Look at the picture linked below for reference. https://i.stack.imgur.com/isfvU.jpg ...

css

Unable to resolve the issue with ExpressPeerServer not being recognized as a function in server.js

I'm facing an issue with the peer.js library in my npm project. I have successfully installed it, but when I try to use it in my server.js file, I get an error saying that peerServer is not a function. const express = require('express'); con ...

javascriptnode.jsexpresswebrtcbackend

I am curious as to why the Bootstrap 4 dropright selected menu appears as a default browser button in Chrome, while it functions seamlessly in Firefox

An issue has been identified that is specific to Chrome. The dropright selected menu appears differently in Chrome compared to Firefox, where it displays correctly with a white background. !https://i.sstatic.net/BulRA.jpg The Bootstrap version being used ...

htmlcsstwitter-bootstrapgoogle-chromebootstrap-4

Show the template when the link is clicked using Angular directive

Perhaps the question is not phrased properly, but here is the idea I am working on. I have a navbar set up with an array of countries that includes their names and coordinates. <body> <nav class="navbar navbar-default"> <div cl ...

javascriptangularjs

Tips for including background pictures in the jumbotron using bootstrap

I've recently delved into bootstrap just a couple of days ago. Now, I'm encountering an issue where I can't seem to add a background image to my entire webpage or even the jumbotron specifically. I've attempted to directly input the pa ...

csshtmltwitter-bootstrapbackground

Replacing a JSON vault using XHR: A step-by-step guide

Can someone assist me in replacing the JSON data from a JSON file on a website using JavaScript XHR? setagaya.json: {"trains":[{"operation_number":1,"line_id":26007,"station_id":784,"track_number":1,"up":true},{"operation_number":2,"line_id":26007,"stati ...

javascripthtmljson

My program contains redundant sections that are being repeated multiple times, and I am unsure of how to remedy this issue

This particular payment gateway relies on a paid market for processing transactions. Unfortunately, there seems to be an issue where multiple error messages are being triggered during the payment verification process. The errors include: ❌ | An error h ...

javascriptnode.jsdiscorddiscord.jsmercadopago

In jQuery, a dropdown selection can be filled with multiple textboxes sharing the same class

I'm experimenting with the idea of using multiple textboxes with the same class filled with different dropdown options that also have the same class. However, I am encountering some issues. When I click on a dropdown option, it changes the value in a ...

javascriptjqueryhtmlselect

Managing UTC calculations with date-fns library in Node.js: A complete guide

Having some trouble with the date-fns library when trying to manipulate UTC dates. When attempting to add or subtract dates, it seems like the library isn't handling them correctly. An example: > const { add } = require('date-fns'); undef ...

javascriptnode.jsutcdate-fns

Discoloration of images on HTML5 Canvas

When working with HTML5 Canvas and using the drawImage function, I've observed slight discoloration in certain browsers such as Google Chrome and Mozilla Firefox. Interestingly, Internet Explorer and Chrome Android do not exhibit this issue. The globa ...

htmlimagecanvas

Steps to include a Target property in a freshly created MouseEvent

Trying to dispatch a contextMenu event, I've noticed that in the MouseEvent interface for TypeScript, the target property is missing, even though it is documented in the contextMenu documentation. Here's my TypeScript snippet: const emulatedMou ...

javascripttypescripteventsdom-events

Automatically bypassing git conflicts in package.json: A step-by-step guide

We encounter frequent updates to shared npm packages in our app, resulting in multiple pull requests updating the same package version. Consequently, conflicts arise on GitHub when these pulls are merged into the master branch. Is there a way to automati ...

javascriptgitgithubnpm

Ensuring the proper sequence of operations within a jQuery ajax callback function

I am facing an issue with my jQuery ajax function. The callback function includes two actions: 1) Taking the ajax result (which is an html form) and inserting it as the inner html of an html span. 2) Submitting this form How can I make sure that the form ...

javascriptjqueryajax

React-Query leads to variable becoming undefined upon component update

I'm currently utilizing dnd-beautiful-kit to organize Cards on my platform. Each Card contains specific information, as shown in the video, along with an Avatar component. The Avatar can either display the user's image (if avatarSource exists) or ...

javascriptreactjsdrag-and-dropreact-query

jQuery Autocomplete - Showing array of options upon selecting input field in Internet Explorer

After encountering an issue with the autocomplete feature in a web application, I posted a question on Stack Overflow. The provided answer solved the problem in Chrome, but unfortunately, it did not work in Internet Explorer 8 or 9, and possibly earlier ve ...

javascriptjqueryjquery-uijquery-autocompletejquery-ui-autocomplete

Tips on duplicating an object within a React state without using references

In my React application, I have a state that contains several objects. I need to make a copy of the c: "value" field from the initial state before it gets replaced by the input value from e.target.value. The purpose behind this is to ensure that ...

javascriptreactjs

In Chrome, CSS automatic hyphens are displayed as question mark symbols

On my website, I have implemented automatic hyphenation using CSS: article > p, article > li { -o-hyphens: auto; -o-hyphenate-limit-before: 3; -o-hyphenate-limit-after: 3; -o-hyphenate-limit-chars: 6 3 3; -o-hyphenate-limit-lines: 2; -o-h ...

htmlcssreactjs