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

What is the best way to store JSON encoded items in an array using square brackets?

Currently, I am utilizing Javascript along with NodeJS to dynamically generate an array of JSON objects. My goal is to store this array of JSON objects in a .json file for future reference. However, when I attempt to save the file, I encounter an issue whe ...

javascriptjson

Angular directive to delete the last character when a change is made via ngModel

I have 2 input fields where I enter a value and concatenate them into a new one. Here is the HTML code: <div class="form-group"> <label>{{l("FirstName")}}</label> <input #firstNameInput="ngMode ...

javascriptangulartypescript

Tips for injecting animation into a DIV

I am trying to make a <div> element on my webpage expand to the full width and height of the screen. While I have managed to achieve this, I also want to implement an animation that will be displayed when the <div> enlarges to fit the screen si ...

javascriptjquery

Performing a search in Django using raw MySQL commands

I am currently in the process of developing a custom search engine that includes 4 search fields, aiming to search within a MySQL table. This snippet from my views.py covers the search functionality, pagination, and listing of the entire table data. def ...

pythonhtmlmysqldjango

Is it possible to transform a ReadonlyArray<any> into a standard mutable array []?

At times, when working with Angular functions and callbacks, they may return a ReadonlyArray. However, I prefer using arrays in the traditional way and don't want to use immutable structures like those in Redux. So, what is the best way to convert a ...

javascriptangulartypescript

Using Two JavaScript Functions with Identical Names in One HTML File

I am currently facing an issue with a function where the data is retrieved from the getValue() function. The following code snippet is a fragment. grid.js function gridLoadComplete(){ var data = getValue(); } Take into account the following H ...

javascriptjqueryhtml

Show a pop-up form when a user focuses on it using React

Hello, I have been looking for a way to create an overlay with a form that appears when a specific input field is clicked. I am trying to achieve this using React. Can someone please advise me on how to accomplish this? Here is my code import React, { Co ...

htmlcssreactjs

Is there a way to verify the presence of a specific word within a classname?

My goal is to verify if the string ("Pre laminated ") matches the css class name I am checking. I only need confirmation of whether the given word is present in the classname: Output "pass" if it exists, output "fail" if it does not. ...

javacssseleniumclassname

if the arguments for a javascript function are not provided

Currently, I am in the process of learning JavaScript through a book called "Visual Quickstart Guide". However, I have encountered a challenge with understanding the logic behind a particular code snippet. In the function definition below, it appears that ...

javascriptajax

The post feature is not delivering the object as expected

I have created a Login page that is supposed to post Username and Password using Axios. I wrapped the username and password into an object as shown in the code below, but when I submit the form, I receive a "201" response. Everything seems to be working fi ...

javascriptreactjsaxios

The options in the dropdown menu vanish when interacting with a jQuery feature that relies on

Recently, I have found AJAX, JSON, and jQuery to be indispensable tools in my coding endeavors. The application I am working on is a replacement for a flawed one, and it is coming along nicely. Despite making progress with the AJAX method, I have encounte ...

javascriptphpjqueryajaxjson

The incorrect date selection made by the Datepicker feature in the Vue / Buefy component

Currently, I am utilizing Vue / Buefy as a datepicker in the form on a specific page (2nd step). You can find the page here: An issue has arisen where the date of birth input is sometimes recorded inaccurately. For instance, the user selects June 5th, 197 ...

javascriptvue.jsdatepickervuejs2buefy

Nodemon failing to trigger auto-refresh

My journey with learning node.js using nodemon has hit a roadblock. Despite following tutorials and installing everything exactly as shown, I'm facing an issue. Whenever I enter 'nodemon index.js' in the terminal, it hosts properly but any c ...

javascriptnode.jsnodemon

php code to paginate mysql results

Imagine I have 50 rows in my database. How can I retrieve MySQL results in pages, displaying 5 results on each page and showcasing the pages as follows: [1], 2, 3, 4...10? For example, if it's on page 5, show 3, 4, [5], 6, 7...10 without refreshing al ...

phpjavascriptjquerymysqlajax

Tips for maintaining HTML lines within an 80-character limit

Someone mentioned to me the importance of keeping HTML lines under 80 characters. My code editor, Atom, even displays a reminder for this limit. I've come across many discussions on this topic but haven't found any examples. For instance, consid ...

html

The useEffect function is executing two times

Check out this code snippet: import { type AppType } from 'next/app' import { api } from '~/utils/api' import '~/styles/globals.css' import Nav from '~/components/Nav' import { useEffect, useState } from 'react& ...

javascriptreactjsnext.jsreact-hooksprism

Angular Kendo dropdownlist and input textbox are not working together as anticipated

I'm looking to implement a dropdown list similar to Google search using Kendo Angular. However, I've encountered an issue where entering text in the textbox and pressing "Enter" passes the first matching value from the dropdown list to my compone ...

javascriptangulartelerikkendo-ui-angular2kendo-dropdown

Is there a way to make jQuery Validate display errors within the form elements rather than outside of them?

Given the jQuery Validate basic example provided in the link below, what method can be used to display error messages within form elements whenever feasible (excluding checkboxes)? http://docs.jquery.com/Plugins/validation#source ...

jquerycssjquery-validate

bespoke design picture holder

Is it possible to create a custom-shaped image container without using <div />? I encounter an issue when trying to add corners on top of the #content-box as shown in this screenshot: . The corner images only cover half of the block element, with th ...

csshtml

Using Cheerio with a Node.js bot

I am currently utilizing Cheerio to extract information from web pages in my .js files. However, I would like these files to automatically restart every 1 day to check for any new data. Instead of using setTimeout, which may not be efficient for managing ...

javascriptnode.jscheerio