What is the best method for creating a top margin that is dependent on the height of the browser?

Is there a way to make the CSS margin: top; on my HTML main_content element relative to the browser window? I want the main_content to always stay at the bottom of the browser window. How can I achieve this?

I attempted the following code, but it didn't work as expected. The body {height:100vh} does not seem to give the body any height, causing the main_content element to not stick to the bottom.

body {height:100vh}
#main_content {position:absolute; width:100%; display:block; left:0; bottom:0; text-align:center; padding:20px;}
<div>Extra Infomation </div>
<div id="main_content">
<p>here you can learn about me and my adventures</p>
</div>

Please note that if you visit my website at www.jeffarries.com, you will see the "learn about me and my adventures" heading along with other content at the bottom of the browser window. I would like this section to be positioned at the bottom, preferably with the "learn about me and my adventures" part slightly sticking out from the bottom of the page.

javascripthtmlcss

Answer №1

Adjust the margin-top of .main_content to be 100vh below the viewport, and then utilize transformY to move it back up:

.main_content {
    text-align: center;
    padding: 20px;
    margin-top: 100vh;
    transform: translateY(calc(-100% - 20px));
background:lightblue;
}
.below_content{
margin-top:-100px;
}
<div class="wrapper">
    <div>Extra Information </div>
    <div class="main_content">
        <p>Here you can discover more about me and my adventures</p>
    </div>
</div>
<div class="below_content">
    This is content located beneath the main content
</div>

Answer №2

To specify a class in CSS, add a . before the class name and to specify an id, add a # before the id name.

The following CSS code is for styling the main_content id:

#main_content {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
}

You can experiment with it on this link https://jsfiddle.net/xsdr00dn/

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

I have noticed that the brand section of the navigation bar changes to black when I hover over it, but I have been unable to locate any

I'm currently working on a Rails application that has a navbar-top with a brand element. However, I've encountered an issue where the background of the brand element turns black when I hover over it. Despite inspecting the browser console, I coul ...

cssruby-on-railstwitter-bootstrap-rails

ReactJS tables that can be filtered and sorted

Within my component's state, there exists an array named 'contributors'. Each element within this array is an object containing various properties. My goal is to present this data in a table format, with the added functionality of sorting an ...

javascriptreactjsfrontend

Passing a value through jQuery Ajax when selecting an option (onchange) to store in a PHP variable on the same page without

How can I retrieve the selected value using PHP and update a specific div element with it? <div id="test"> <?php if (isset($_POST['sweets'])) { ob_clean(); echo $_POST['sweets']; exit; } ?> ...

javascriptphpajax

Analyzing Data for Distributed / External Pages

Our team is currently exploring options for tracking metrics on content we produce for external pages. We are considering various approaches such as creating our own JavaScript, using a tracking pixel, or adapting Google Analytics to fit our needs. We wou ...

javascriptgoogle-analyticsanalyticstracking

Do you notice a discrepancy in the number returned by Javascript's Date.getUTCDate() when the time component is set to

Consider the following code snippet: const d = new Date('2010-10-20'); console.log(d.getUTCDate()); If you run this, the console will output 20. However, if you modify the code like so: const d = new Date('2010-10-20'); d.setHours(0, ...

javascripttypescript

Is JSON formatting essential for Highcharts? How to divide and preprocess data for creating charts?

Seeking assistance with extracting data from a JSON at the following link: I am attempting to integrate this data into highcharts for visualization. Although I have a functioning chart, I am struggling with properly formatting the JSON mentioned above du ...

javascriptjsonapihighcharts

When you assign the page results from the scrape-it npm to a variable, it will return a Promise with the status of "pending."

I recently downloaded scrape-it from NPM as a dependency and I'm trying to store the results in a variable instead of using a callback function. When I run the code snippet provided in the scrape-it documentation: var myVar = scrapeIt("http://ionicab ...

javascriptnpmpromise

Converting Numbers into Words with the power of HTML and JavaScript

CONVERT NUMBER TO WORDS Write a simple JavaScript program that converts a number to words. Include an HTML page where the user can input the number to be converted. The conversion process should involve using both for loops and switch statements. ...

javascriptfor-looptype-conversionswitch-statementstring-conversion

Choose the span element within every other td that is not enclosed by an anchor tag

The table structure I am working with is as follows: <tr> <td> <a> <span> some content </span> </a> </td> <!-- td having straight span --> <td> <span> ...

javascriptjqueryhtmlcss

The use of non-breaking space symbol ( ) does not function properly in Weblogic 14

After upgrading from Weblogic 12 to Weblogic 14 Server, I encountered a change in behavior. Previous Status Everything was functioning properly before the update. When requesting an html page with &nbsp; whitespaces, the server would include these spa ...

htmlweblogicweblogic14c

Using JavaScript to analyze and handle newlines, spaces, and the backslash character

Hello everyone, I'm hoping things are going well. I am currently working on removing newline and "\" characters from a string that I have after using JSON.stringify(). The string in question appears as follows: "[{\n \"id_profile&bs ...

javascriptregexjson

Positioning images within a relatively positioned div using absolute positioning

I have come across multiple discussions on this topic, but I am still struggling to make the following code snippet function correctly: .container { position: relative; width: 100%; } .left { position: absolute; left: 0px; } .right { positio ...

htmlcsscss-position

Problem with AWS Lambda function handler failing to insert data into Athena

Trying out a sample code snippet for Amazon Athena to test data insertion, but it's not working as expected. The CloudWatch logs don't show any output after the statement execution is completed. Even when switching to a simple select statement, t ...

javascriptnode.jsaws-lambdaamazon-athena

Customize Appearance: Overlay Images with Display Properties

I have created a unique slideshow that overlays multiple images using JavaScript to change their opacity and attributes. You can view the slideshow here: Upon inspection (using firebug), I noticed an issue with how the images are displayed. When the displ ...

htmlcss

comparison of declarative loop and imperative loop

In my journey to transition from an imperative programming style to a declarative one, I've encountered a challenge related to performance when dealing with loops. Specifically, I have a set of original DATA that I need to manipulate in order to achie ...

javascriptfunctional-programmingramda.jsdeclarative-programming

Having trouble obtaining search parameters in page.tsx with Next.js 13

Currently, I am in the process of developing a Next.js project with the Next 13 page router. I am facing an issue where I need to access the search parameters from the server component. export default async function Home({ params, searchParams, }: { ...

javascriptreactjstypescriptnext.jsnext.js13

Troubleshooting: Issues with Jquery's has, find, contains functions

As I check whether an element contains another element, I've previously utilized the jquery element.has(secondElement) function. In my angularjs project, I make use of jquery within a directive where I transclude elements through markup using ng-tran ...

javascriptjqueryangularjs

Is there a different method like Calc() to create a static sidebar alongside content?

Is there a way to achieve a fixed sidebar on the left and a content area on the right without using calc() in CSS? I'm looking for a more universally supported method that works across different browsers. .left-sidebar { width: 160px; ...

css

Changing the orientation of a dropdown menu from horizontal to vertical

Hello, I am seeking assistance to transform the top dropdown menu layout into a vertical one similar to the menu on the left side. Any help would be greatly appreciated as I am running out of ideas! Thank you in advance! @charset "utf-8"; /* CSS Docum ...

htmlcss

`The challenge of navigating within Material UI tabs in a React js project`

In my current project, I am utilizing React Js along with the Material UI Tabs component to switch between two different components. However, I have encountered an issue where when I navigate to Tab 2 or Tab 1 by clicking on them, the route changes and th ...

javascriptreactjsmaterial-uisetstatereact-state-management