Looking for a single-page website that adjusts to any screen size

I am currently working on a single-page website that needs to be responsive, with smooth scrolling using anchors.

The challenge I'm facing is figuring out how to make each div fill the entire screen as intended.

body {
    width: 100%;
    height: auto;
    font-family: Source Sans Pro, Century Gothic;
    background: url('images/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
}

ul {
list-style: none;
}

#intro1 { 
font-family:'Press Start 2P', cursive; 
font-size: 80px; 
display: block; 
text-align: center; 
margin-bottom: auto; 
margin-top: auto; 
top: 50%;  
height: 100%;
width: 100%;
position: absolute; 
}

#intro2 { //This doesn't work. I've also tried to set top with pixels.
top:100%;
height:600px;
width: 100%;
position: absolute;
font-size: 80px; 
display: block; 
text-align: center; 
margin-bottom: auto; 
margin-top: auto; 
top: 50%;  
font-family: Source Sans Pro;
height: 100%;
width: 100%;
}

#products { //This works fine for some reason.
top: 800px;
width: 100%;
position: relative;
background: url('images/circuit.jpg');
font-family: Source Sans Pro;
font-size: 16px;
margin: 0;
text-align: center;
}

Any suggestions on how I can ensure each div fills the whole screen without relying on jQuery plugins?

javascriptjqueryhtmlcss

Answer №1

To incorporate total viewport height in your CSS, you can utilize the VH unit. This unit represents the percentage of the viewport's height. Therefore, 

100vh equals 100% of the viewport height
.

For instance:

HTML:

<div id="content1" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>
<div id="content2" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>
<div id="content3" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>

CSS:

.content{height:100vh}
#content1{background:#EEE}
#content2{background:#CCC}
#content3{background:#AAA}

JSfiddle: http://jsfiddle.net/Vj3dZ/

Source:

Please ensure to check browser compatibility before implementation: http://caniuse.com/viewport-units

Answer №2

In my opinion, it would be beneficial to establish 

HTML { height: 100%;}

I recommend reviewing this question before proceeding

Answer №3

To make sure they function properly, be sure to set the body and other main divs to 100% height!

Instead of using auto, set body height: 100;

Then, for #intro1 and #intro1: Remove any positioning such as margin, top, etc. and it should work correctly....

Check out the basic demo here (resize your browser and then RUN to see the div take up the entire view-port area)

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

The Mouse click event in HighCharts is being managed by both the Series handler and Point handler simultaneously

For my project, I have set up mouse click event handlers for both Series and Points. plotOptions: { series: { cursor: 'pointer', events: { click: function (event) { console.log(event); ...

javascripthighcharts

Determine whether a component is linked to an event listener

If a <Form> component is called with a @cancel event listener attached to it, the cancel button that triggers this event should be visible. If no @cancel event is present, the cancel button should not be displayed. Is there a method to verify if a c ...

javascriptvue.jsvuejs2vue-component

A guide on transferring a PHP array to an AJAX function

My goal is to pass the PHP array values from a specific form ID to my AJAX form. While everything seems to be working fine, I'm encountering an issue where only the (1) ID number gets displayed. In this piece of code for my form, I am passing the ...

phpjqueryajax

Leverage jQuery to retrieve information and fill in an HTML form

Seeking assistance with retrieving data based on a dropdown selection change. Specifically, choosing an Item ID from the dropdown and then populating textboxes and other dropdowns with values from the database. The other dropdowns already have assignment o ...

phpjqueryhtmlsqldrop-down-menu

Looking for a JavaScript library to display 3D models

I am looking for a JavaScript library that can create 3D geometric shapes and display them within a div. Ideally, I would like the ability to export the shapes as jpg files or similar. Take a look at this example of a 3D cube: 3d cube ...

javascriptreactjstypescript3drender

Tips for arranging information in ng-repeat using nested objects within JSON data on AngularJS

Looking to display an array of object properties in an Angular view. Here is the object: $scope._Json = { "foo": { "ItemDimension1": { "Item": "item1", "ItemIndex": 1, "SelectedItems": [{ "C ...

javascriptangularjssorting

Setting up Next Js to display images from external domains

Encountering an issue with my next.config.js file while working on a project with Next.js in TypeScript. This project involves using ThreeJs, @react-three/fiber, and @react-three/drei libraries. Additionally, I need to include images from a specific public ...

javascriptreactjstypescriptimagenext.js

SweetAlert html is not recognizing ng-app, but it functions correctly within the html body

When inserting a bootstrap table inside a SweetAlert, I encountered an issue where using ng-app or ng-repeat to populate data inside the table's rows did not call ng-app. However, when populating the table outside of the SweetAlert in the body, ng-app ...

javascripthtmlangularjssweetalertng-controller

What is the best approach to eliminate the 'false' type within a setState function in React?

Hey, I've been working on a project that involves using the useState hook and dealing with state using generics. I encountered an issue where I manipulated a fetched array within a setState function using the filter method, which resulted in returnin ...

javascriptreactjstypescriptgenerics

Unable to retrieve file path from image selection in JavaScript by clicking on a button

I am trying to create a simple browsing feature that only accepts images. However, after clicking the button, I am unable to retrieve the full path in JavaScript. All I can get is the filename. JavaScript <script type="text/javascript"> functio ...

javascriptjqueryhtmlimage-uploading

Exploring ways to enhance the appearance of a Sidebar Widget Navigation using JQuery

When creating navigational items with submenus, such as 'Primary Fees', I added an arrow for visual indication. To enhance user experience, I included an animation that rotates the arrow and highlights the Main Menu item in red upon hovering. Thi ...

javascriptjqueryhtmlcss

The initial update of ng-model is not occurring

I am currently working on a checkbox functionality in my project that is bound to an ng-model: <input type="checkbox" ng-change="toggleAll(globalChecked)" ng-model="globalChecked"> The toggleAll function is responsible for accessing the globalCheck ...

javascriptangularjs

Unveiling the Solution: Deactivating CSS Style Hints in VS Code!

click here to view the image Can anyone guide me on how to turn off the style hint feature in VS Code while working with CSS? ...

htmlcssvisual-studio-code

What is the best pattern to utilize for these types of tasks?

I've been struggling a bit with understanding the MVC principle, but I always believed that business logic should be contained within models - please correct me if I'm mistaken. In my current project, I am following the MVC pattern. The rou ...

javascriptnode.jsdesign-patterns

Transferring Variables from WordPress PHP to JavaScript

I have implemented two WordPress plugins - Snippets for PHP code insertion and Scripts n Styles for JavaScript. My objective is to automatically populate a form with the email address of a logged-in user. Here is the PHP snippet used in Snippets: <?p ...

javascriptphpjquerywordpress

Personalizing text in HTML using JavaScript results

I have a modal dialog box function that pops up when a user clicks a button, triggered by a javascript/jquery script. The text displayed in the dialog is set up within an HTML div element that references the script function. My query is how to personalize ...

phpjavascriptjquery

Unable to modify the background color using the .css stylesheet

https://i.sstatic.net/uKcMs.jpgMy attempts to change the background color in a simple HTML page using a CSS style sheet have been unsuccessful. Despite no errors being present in my code, I am encountering this strange issue. <!DOCTYPE html> < ...

csshtml

Assigning the value of one variable to be equal to the most recent state value of another variable

As a beginner in reactjs, I am facing a challenge in my code where I need to set the starting balance in a form as the closing balance of the previous record. The initial values in the form are fetched from an API call stored in the get_schedule array. The ...

javascripthtmlreactjsjsx

Using bootstrap with a navbar in an asp.net mvc application proves to be challenging

There are only a few bootstraps that work with this site, such as the default and lumen bootstrap. You can find them on However, other bootstraps like materia and flatly seem to be causing display issues. Here's an example of how it looks: Edit: Bel ...

javascripthtmlcssbootstrap-4

Tips for aligning a div below another div nested within a separate container

Can I position div#d2 directly beneath the div#d1 container according to the code below, instead of positioning it outside the height of the wrapper? #wrapper { height: 100%; display: flex; background-color: steelblue; align-items: center; min ...

htmlcsscss-positionflexbox