Ensure that your article occupies the entire page height-wise by using HTML and CSS styling

Currently, I am working on creating an article that spans the entire length of a page from top to bottom. However, I have encountered a roadblock with this linked image. The content of my article may expand dynamically (https://codepen.io/grojd/pen/dyOeKGq). What I am aiming for is to have a footer always fixed at the bottom of the page and connecting my article with the menu. Below is the CSS code for my article:

 article {
  background: #708a91;
  opacity: 90%;
  margin: 0% 30%;
  border: 1px dotted black;
  box-shadow: 0px 0px 25px 1px #cfcaca;
  height: auto; 
}
htmlcss

Answer №1

I am looking to create a comprehensive article that spans the entire length of the page, from top to bottom.

One way to achieve this is by utilizing viewport units, which consist of 4 different options:

  • vw - viewport width units (each vw represents 1% of the viewport width)
  • vh - viewport height units (each vh represents 1% of the viewport height)
  • vmin - takes the smaller value between vw or vh
  • vmax - takes the larger value between vw or vh

For example:

article {
  height: 100vh;
}

This code snippet ensures that the height of the article element will always be equivalent to 100% of the viewport height.

Answer №2

Here is how I achieved it (eliminated margin and set width to 100%):

article {
   background: #708a91;
   opacity: 90%;
   width:100%;
   border: 1px dotted black;
   box-shadow: 0px 0px 25px 1px #cfcaca;
   height:auto; 
}

This adjustment enabled the content to span from one edge to the other, seamlessly meeting the footer.

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

Is there a problem with Chrome's display?

I'm currently using Chrome version 53.0.2785.143 and have noticed a rendering issue that tends to occur more frequently within my application when utilizing CSS transform scale. Feel free to check out this JSFiddle link which demonstrates the problem ...

htmlcssgoogle-chrome

Puzzle involving unusual interactions with HTML, JS, and CSS scrollbars

I'm embarking on a special mission using CSS, HTML, and jQuery. My goal is to prevent scrolling when I hover over a specific element on the page. Right now, I'm accomplishing this by setting the body's overflow property to "hidden." However, ...

javascriptjqueryhtmlcss

What is the best way to duplicate a tag that contains multiple other tags with attributes?

My form, named 'myForm', needs a div tag with the id 'original' to be added every time I click a button. Can someone help me figure out how to add these tags? The new tags should appear after the original one, but still within myForm. ...

javascriptjqueryhtml

Tips for displaying a specific JSON element when using interpolation in Angular

How can I display a specific element from a JSON object using Angular interpolation? public responseData:any; renderTokenCard(){ this.mundipaggS.checkToken().subscribe((response:any)=> { console.log("success: ", JSON.stringify(res ...

javascripthtmlangular

attempting to send a user to an alternate webpage following the insertion of an input

As I dive into the world of PHP and HTML, seeking to enhance my skills (although I may be considered a beginner), I am attempting to redirect customers to a different link after they insert some input. Essentially, upon clicking 'verify', they sh ...

phphtml

I am having difficulty centering the contents on the page horizontally

Struggling to achieve horizontal alignment, I suspect the floats are causing issues. Removing them disrupts the layout with left_wrap and right_wrap not staying next to each other. Check out this example on JSFiddle .main_wrap {width:100%;} .main_wrap_2 ...

htmlcss

"Escape the confines of traditional div sections with the dynamic features of

In the beginning, I have arranged two rows of three divs on my webpage, which is how I intend to use them later. However, when testing the 'mobile view', the divs in the section overflow and move into the next part below the section. This causes ...

htmlcssfullpage.js

Steps for modifying the CSS style of a div element following an onclick event:

<html> <head> <style type="text/css"> .step_box { border: 1.0px solid rgb(204, 204, 204); border-radius: 10.0px 10.0px 10.0px 10.0px; } .step_box:hover{ background: rgb(184, 225, 252); } .selected { background-color : #fff000; ...

javascriptjqueryhtmlcss

JQuery functions for click and hover are not functioning as expected on a div element

I am having trouble with a div that I have declared. The click event is not working as expected, and I also need to use the :hover event in the css, but it isn't functioning either. What could be causing this issue? <div id="info-button" class="in ...

jqueryhtmlcss

Implementing JavaScript to Take an Array of Integers from an HTML Input Field and Sort It

Task: Retrieve 10 Array Values from HTML Input Field and Arrange Them in Ascending Order In order to add 10 values from an HTML input field to a JavaScript array, I have created an input field through which data is passed to the array in JS. Two labels ar ...

javascripthtmlarrays

Ways to incorporate audio files into an HTML webpage

My code snippet is as follows: <embed src="upload/audiofile/<?php echo $row['filename']; ?>" height="12px" width="150px" controller="true" autoplay="false" autostart="false" /> I have utilized this code to play audio files on a web ...

jqueryhtmlcssaudioxhtml

The combination of two colors in a hard background fails to create an appealing aesthetic

Seeking assistance with an issue I encountered while trying to create a two-color background. Below is the code snippet: body, html { height: 100%; width: 100%; background: #0000ff; background: linear-gradient(180deg, #ff0000 50%, #0000f ...

htmlcsslinear-gradients

What is the best way to access an element's sibling using JQuery within a function?

How can I use JQuery to set an element to match the value of its sibling? In a table with multiple fields, when clicking an Edit button, I want to copy the label value to its adjacent input field: <table style="width:90%"> <tr> <td&g ...

javascripthtmljquery

How can an HTML5 application be configured to enable access to intranet and local files?

It's a known fact that accessing the local path of a file added using a file input field or drag-and-drop is not possible even with the new FileAPI. Whether this limitation is good, bad, or ugly is not up for debate. The FileAPI specs clearly state th ...

javascripthtml

Using jQuery to toggle the visibility of div elements while displaying an indicator

A query arises regarding the utilization of JQuery to facilitate toggling the visibility of text divs. The question pertains to how one can incorporate an indicator - such as an up and down arrow graphic - to denote whether the divs are open or closed. Sug ...

jquerycssshow-hide

Click to reveal sliding menu bar

Trying to create a sliding menu bar (.top-bar) that activates when clicking an arrow (#hide), causing the arrow to also slide up and switch from an up arrow to a down arrow. Here is my unsuccessful attempt: $(document).ready(function(){ $("#hide").c ...

jqueryjquery-uihtmlcss

Is it possible to disregard text formatting in Python when using Selenium?

I am experiencing an issue when trying to compare a name from my name string to a name in a webelement. For instance: Name format in my namestring (scraped from a website): Mcburnie Name in webelement: McBurnie The Xpath matching fails because the webe ...

pythonhtmlselenium

Using namespaces in Rails to encapsulate CSS styles

Is there a way to add namespaces to CSS within a Rails project? I have two pre-defined CSS files and two application layouts. I want the first layout to use one CSS file, and the second layout to use the other. However, both CSS files have styles for the ...

cssruby-on-rails

What is the best method for incorporating separate CSS files for individual HTML templates within a Flask project?

I am embarking on a Flask project and want to keep things organized by having a separate css file for each html file. Most tutorials available online suggest placing all the CSS code in one /static/styles.css file. However, when I try to run the following ...

htmlcssflaskjinja2

All the optgroups in the select picker are being duplicated from the first optgroup

I am currently facing an issue with a select picker multiple dropdown. When I add optgroups, the values of the second and third optgroups are being copied by the first optgroup. The opt-groups are being populated via JavaScript. <select class="mod ...

htmljquerybootstrap-5bootstrap-selectpicker