Is there a way to adjust the height of sections across a single page?

<body class="signle-layout">

    <section id="home" class="pt-page pt-page-1" data-id="home">
<p>some html css js items</p>
      </section>
        <section id="about" class="pt-page pt-page-2" data-id="about">
<p>some html css js items</p>
          </section>
            <section id="services" class="pt-page pt-page-3" data-id="services">
<p>some html css js items</p>
              </section>
                <section id="clients" class="pt-page pt-page-4" data-id="clients">
<p>some html css js items</p>
                  </section>
                    <section id="contact" class="pt-page pt-page-5" data-id="contact">
<p>some html css js items</p>
                      </section>

</body>
<style>
.pt-page {
    width: 100%;
    height: 0;
    position: absolute;
    opacity: 0;
    top: auto;
    left: 0;    
    display: flex;
     min-height:620vh;
    background-color: #fff;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.signle-layout{
    background: #f3f3f3;
    min-height: fit-content !important;
}


</style>

I have a unique single page website template where each page has different sizes. Despite my attempts to fix the size issue by adjusting the classes, I still encounter problems with the layout. When I set the min-height parameter of each section to "fit-content" or define the size manually, the body background still appears between sections as shown in the example image. Check out a screenshot here

javascripthtmlcss

Answer №1

It appears that the properties for the section have not been defined.
Make sure to include these properties in your code,
especially specifying the height for the largest section block.

body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}

section{
height:300px;
background:#AAAAAA;
color:Black;
display:flex;
justify-content:center;
align-items:center;
width:300px;
}
section p{
font-size:2rem;
font-weight:bold;
}
<body>
<section>
<p>Section 1</p>
</section>
<br>
<section>
<p>Section 2</p>
</section>
<br>
<section>
<p>Section 3</p>
</section>
<br>
<section>
<p>Section 4</p>
</section>
<br>
</body>

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

Creating a jQuery-powered assistance pop-up: A step-by-step guide

On various websites, you may have seen a help box labeled with a question mark icon [?], which, when hovered over, displays a small box of additional information. I discovered that these are typically created using a combination of Javascript and jQuery. ...

javascriptjquery

Unable to save screenshot in the report portal while running with WebDriver.io (wdio) execution

In my webdriverio project, the directory structure is as follows: e2e/ utilities/pUtil.js report/screenshot specs wdio.config.js Within pUtil.js file, I have the following code snippet: static takeScreenshot(name, failure = false, test) { const path = ...

javascriptseleniumjenkinswebdriver-io

Accessing the Vuex store from external JavaScript files is not allowed

The structure of my application can be found in the following link Architecture of my app For my specific use case, I am looking to utilize getters in the Axios interceptor (/../src/app/shared/services/http-client/http-client.js) to include the authoriza ...

javascriptvue.jsvuejs2vuex

Merge identical data into a unified field within a table

I have a table that displays different colors and their quantities. I would like to merge rows with the same color into one row, with the total quantity shown in that row. For instance, if there are 2 "black" colors with quantities of 5 and 2, I want to c ...

javascriptvue.js

Angular doesn't update class field when event listener is triggered by button

My Objective: To generate a random number To start a timer that counts to this number and then displays a button with a random margin To stop the first timer and start another when the button is clicked To calculate the time elapsed between the ...

javascriptangulartypescriptaddeventlistener

Adding node-neat along with other files to the node-sass grunt task

I've been facing some challenges with using node-neat in conjunction with grunt-sass, specifically when trying to add additional include paths. Initially, everything works fine when I set it up like this: options: { includePaths: require(' ...

javascriptnode.jsgruntjsbourbon

Implementing the 'active' class on a hyperlink in CodeIgniter: A step-by-step guide

My template is divided into three sections: header, footer, and content. The main menu links are located in the header section. I am trying to apply a CSS class 'active' to the hyperlink that is selected. I have written jQuery code to achieve thi ...

phpjquerycssajaxcodeigniter

Steps for creating a Pure CSS Scroll-to-Top button

Looking to create a Pure CSS Scroll to top, I attempted it but struggled with making it clickable like in JavaScript. Here is the CSS code I tried: body { height: 99999999999999999999999999999999999px; position: relative; } button { color: white; ...

htmlcss

Stop event bubbling in Vue.js for router link

I'm working with the following HTML template... <template> <li class="nav-item" style="z-index:9"> <router-link :to="link.path" @click.native="linkClick" ...

javascriptvue.jsevents

Troubleshooting Problems Arising from PHP, Ajax, and SQL Integration

I've been encountering an issue that seems simple, but I haven't been able to find a solution specific to my problem in the forums. The problem arises when I try to display a table of hyperlinks, each linked to an AJAX method with an 'oncli ...

phpjavascriptsqlajax

jQuery Selectors with Variable

Having trouble incorporating variables in selectors using jQuery. It's a small issue, but quite frustrating! Check out this jsFiddle for an example: The code snippet below is not functioning as expected: var folder_id = "folder"; $("#selects select ...

jqueryhtmlvariablesselect

Creating a table using ng-repeat in AngularJS on a single-level array

I have a collection of N items: $scope.collection = ["item 1", "item 2", "item 3" ... ,"item N"] My goal is to convert this collection into a table with X columns and N/X rows. Is it feasible to achieve this using the ng-repeat directive? I am aware th ...

javascriptarraysangularjsangularjs-ng-repeathtml-table

Using a variable as a parameter when requesting a value from a JSON object in JavaScript

I consider myself to be at an intermediate level in JavaScript, but I've hit a roadblock when trying to access the key in a JSON message that is returned to me. My code is dynamic, so I need to pass the key into the query. For example: After running ...

javascriptjson

come together for the purpose of creating an insert statement in MySQL syntax

Good day! I have a query about creating a MySQL syntax statement for inserting data into two tables. Here is the structure of the tables: I am able to insert `userid` and `picturepath`, but I'm unsure how to also insert into the `flag` column in the ...

c#asp.netmysqlsqlhtml

Retrieving Memory Usage of a Process in Node.js/JavaScript

I'm currently exploring ways to access the memory of a running process. For my web application, I have a server built with Node.js, an app.js file, and an agent that communicates with app.js through the server. I'm interested in finding a metho ...

javascriptnode.js

Translating JavaScript, HTML, and CSS into a Class diagram

I've been on the hunt for a tool that can assist me in creating a class diagram for my current web development project. Although I have a plugin for Eclipse that works for JavaScript, it lacks the ability to connect elements from HTML and CSS - . I ...

javascripthtmlcssclass-diagram

Creating a custom function that retrieves a specific column from a JSON object and returns it as an array

How can I create a function to extract specific values from an array? The goal is to retrieve the values 4, 3, and 22 from the second column of 'selection1'. var data = {"selection1": [ {"answers": [1, 4, 5, 7]}, {"ans ...

javascriptarraysjsonobject

Modifying the Scroll Bar's Color within an iframe

Is it possible to customize the color of the horizontal scrolling tab in an iframe? I am curious if this effect can be successfully implemented across all browsers. Your insights on this matter would be greatly appreciated. ...

cssiframe

What is the best way to send e.target data back to the server?

Currently, I have a front-end system in place to monitor which element has been clicked and send that information back to the server for further processing. The implementation is as follows: $('body').on('click', function(e) { $.po ...

javascriptjquerynode.jsdom

The absence of button.onclick=func in the HTML code is notable

I am facing an issue where adding an onclick attribute to an input element via JavaScript does not display in the HTML, but the function gets executed. On the other hand, when I add the input element directly in the HTML code, the onclick attribute shows u ...

javascriptjqueryhtml