Text beyond the body tag

My current setup includes:

html, body {
     height: 100%;
}

section {
     width: 100%;
     height: 100%;
}

However, I have noticed that any content appearing below the .full class is not being included within the body tag. Is there a way to address this issue or is it not a major concern?

I've attempted adjusting the overflow value and changing the height to auto, but unfortunately, nothing has worked so far.

<body>

<section class="full">

     <div class="center"></div>

</section> <!-- Everything below here appears outside <body> -->

<section class="main">

<header>
<!-- Nav goes here -->
</header>

<content>
<!-- Main divs are here -->
</content>

</section> 

</body>

Answer №1

The reason for this behavior is a CSS rule that sets the height of all <section> elements to 100% in the code.

In the markup, the first section (labeled 'full') occupies the entire viewport height due to setting both html,body elements to 100% height. This action triggers a vertical scroll in the browser to accommodate the remaining content below.

To see a demonstration, click on this link: here.

Answer №2

With two <section> elements on your webpage, each set to a height of 100%, the second section will be positioned below the fold.

Answer №3

When setting a height of 100%, it is important to note that this does not mean "100% height of the content," but rather "100% of the height of the parent element." In the case of elements such as html and body, the parent element is the viewport. Therefore, if your browser window is 1000 pixels high, the body will also be 1000 pixels in size.

Similarly, the section element will inherit the same height as the body, which in this example would be 1000 pixels for both elements.

To begin addressing this, the first step should involve removing the height: 100% from all relevant elements. Subsequently, specifying the desired effect you are aiming for will facilitate the next steps of handling these height properties.

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

Ways to center a div with position:relative vertically on the page

What is the best way to center a position relative div vertically within its parent element? For example: <div class="parent"> <div style="position:relative;" class="child"> </div> </div> Any suggestions on how to vertic ...

Why is it that the z-index doesn't seem to affect the stacking order of my background image?

I am facing an issue with my Bootstrap carousel where the z-index is not working as expected. The decoration I have in the background is overlapping the text instead of appearing behind it. I want the illustration to be positioned under the text. .carou ...

Looking for a way to efficiently add multiple value inputs to a JSON object using jQuery or JavaScript?

Here is the HTML input tag code I am working with: <form id="info"> <input id="A" name="A" type="hidden" nodetye="parent" value="A"> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" name ...

Is there a way to retrieve the values of a checkbox from a location outside the form where it is initially defined?

After successfully developing a script that deletes rows from a table when a checkbox is selected, I encountered an issue where the values of the checkboxes were not accessible outside of the form action they were placed in. The checkboxes and correspondin ...

Customize your dropdown menu options with JQuery: A step-by-step guide

I am dealing with a situation where I have a dropdown menu labeled as Code. The options available in this dropdown are fetched from a database, populating the dropdown accordingly. Alongside the Code dropdown, there is a textbox named Name. Under certain c ...

XSLT transformation eliminates HTML elements from mixed content

Can XSLT maintain anchors and other embedded HTML tags within XML? Situation: I'm currently attempting to transform an HTML document into XML using an XSL stylesheet with XSLT. The original HTML content contained anchor tags scattered throughout (e.g ...

In the Swiper function of JavaScript within a Django template, the occurrence of duplicate elements (products) is being generated

Experimenting with displaying products in a Django template, I decided to utilize the Swiper js class. This allowed me to showcase the products within a div, complete with navigation buttons for scrolling horizontally. However, when testing this setup wit ...

An image spanning two columns on a page with three columns

I am currently utilizing Foundation 4 for my website design. I am attempting to create an image that spans over 2 columns in a 3-column layout using the Foundation grid system. Here is how I envision it: https://i.sstatic.net/m7InR.jpg I am wondering if ...

unable to retrieve real-time data using a search bar

I'm working on a drop-down menu of locations/Regions with a search box nested inside. https://i.sstatic.net/liWpP.png The image shows a list of places followed by regions. The region section is static, while the rest of the places are fetched from a ...

How can I retrieve a password entered in a Material UI Textfield?

My code is functioning properly, but I would like to enhance it by adding an option for users to view the password they are typing. Is there a way to implement this feature? const [email, setEmail] = useState(''); const [password, setPassword] = ...

The addition and deletion of classes can sometimes lead to disruptions in the DOM

I've been struggling to phrase this question for a while now. I'm working on a single-page e-commerce site that operates by modifying the HTML in divs and using CSS along with JQuery to show and hide those divs. My problem arises when, occasional ...

Ways to set control values with AngularJS

After retrieving a single record from the database for my detail view, I need to assign data to controls. Take a look at my code snippet below: var app = angular.module("MyProductApp", []); app.controller("ProductsController", function ($scope, ...

Disable the javascript link on small devices

I currently have a javascript link (Trustwave) on my desktop website theme that I need to deactivate when viewed on mobile devices: Located in footer.tpl: <div style="position:absolute; margin-left:100px; margin-top:50px"> <script type="text/j ...

Considering the advantages and disadvantages, is it advisable to implement HTML 5 for a website revamp?

Currently, I am involved in the re-write and redesign of a major website. To ensure that my work is well-informed, I have been conducting extensive research on HTML 5. However, prior to adopting it for this particular design implementation, I would like to ...

Move the cursor to the end of the text when the key is released

I've developed a feature similar to that of a command line interface. When you input commands and hit the up key, the previous command is displayed. Everything is functioning as intended, but there's one minor issue. The current problem I'm ...

Using the function to show content by calling its assigned ID

<script type="text/javascript"> function selectRow(id){ $.get("http://inactive/test.php?id=" + id, function(data,status){ return data; }); } </script> <script type="text/javascript"> $("tr").click(function() { window.l ...

What is the significance of the space between form.validate and .ng-invalid-email.ng-dirty?

I'm currently working on an AngularJS application and I'm confused about the spacing between "form.validate" and ".ng-invalid-email.ng-dirty" in the stylesheet code below: <style> form.validate .ng-invalid-required.ng-dirty {background ...

Creating a rotating circle in CSS with ion-slides: A step-by-step guide

Hello, I am attempting to develop a circular object that will rotate in the direction it is dragged. Within this circle, there are elements positioned along the border so that these elements also spin accordingly. To illustrate, below are the specific elem ...

Are user message templates available for use with Twitter Bootstrap?

I am interested in implementing Twitter Bootstrap into my website design. While it looks amazing, I now need to incorporate user messages (similar to those found on forums or Twitter). These messages should include short text, submission time, user image, ...

Modifying the background hue of a text box within an external stylesheet

I'm currently facing an issue where I need to change the color of a textarea when a radio button is clicked. There are 4 radio buttons, so the textarea should change color 4 times for each button. I am working in reactjs and despite researching the pr ...