The smallest allowable page height is equal to the height of the viewport

I am facing a seemingly simple problem that is causing me quite a bit of confusion.

For instance, in the code snippet provided, the header should have a height of 130px and the footer should be 20px tall. I require a certain min-width for my #landing-page-container so that the footer is always at the bottom of the current view (even if the content exceeds the initial view).

Here's the codepen example: 

.container{
  position: absolute;
  min-height: 100vh;
  min-width: 100%;
}
#header-container{
  position: relative;
  height: 130px;
  background-color: red;
}
#landing-page-container{
  position: relative;
  height: 100%;
  background-color: blue;
}

#footer-container{
  position: relative;
  height: 40px;
  background-color: green;
}
<div class="container">
  <header id="header-container">
    Here is some navbar
  </header>
  <section id="landing-page-container">
    Here is some content
  </section>
  <footer id="footer-container">
    Here is footer
  </footer>
</div>

I find myself a bit overwhelmed with all the positioning and display properties in CSS.

htmlcss

Answer №1

Hello there

If you want to achieve the desired outcome, you can determine the minimum height of the content by taking into account the heights of the header and footer. Below is a snippet where your code has been adjusted. In this scenario, you won't even need to specify the minimum height and width for the container.

#header-container {
  height: 130px;
  background-color: red;
}
#landing-page-container {
  /*
  The calculation for the minimum content height involves subtracting the heights of the header and footer from the entire viewport height along the y-axis.
  */
  min-height: calc(100vh - 130px - 20px);
  background-color: blue;
}
#footer-container {
  height: 20px;
  background-color: green;
}

/* This section is purely for demonstration purposes*/
body {
  margin: 0;
}
<div class="container">
  <header id="header-container">
    Insert navigation bar here
  </header>
  <section id="landing-page-container">
    Insert some content here
  </section>
  <footer id="footer-container">
    Place footer content here
  </footer>
</div>
Hope this information proves useful.

Take care

Answer №2

If you want to solve this issue, simply utilize position: fixed along with including width: 100% to each element:

.container {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  margin: -7.51px;
}

#header-container {
  position: fixed;
  height: 130px;
  width: 100%;
  background-color: red;
}

#landing-page-container {
  position: fixed;
  top: 130px;
  height: 100%;
  width: 100%;
  background-color: blue;
}

#footer-container {
  position: fixed;
  top: calc(100% - 40px);
  height: 40px;
  width: 100%;
  background-color: green;
}
<div class="container">
  <header id="header-container">
    Here is some navbar
  </header>
  <section id="landing-page-container">
    Here is some content
  </section>
  <footer id="footer-container">
    Here is footer
  </footer>
</div>

https://codepen.io/anon/pen/YawNjr

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

Tips for placing the html <a> tag above an image and centered

Here's the HTML code I'm struggling with, which is inside an ASP.NET Repeater: <div class="team_member"> <a class="teamMemberLink" href='<%# "Profile.aspx?uID=" + Eval("ID") %>' target="_blank"><%# Eval("Name") ...

htmlcss

Steps for serving audio files in a Spring Boot application

Can someone advise on the best location to place my audio folder in order to reference it as src="audio/audio_name" within an HTML audio tag? I attempted placing it in the resources folder, but when using src="http://localhost:9191/resource ...

javahtmlspring-boot

Conceal the block quotes while substituting with a newline

My HTML page contains numerous comments enclosed in blockquotes. I attempted to implement a feature that allows users to hide all the comments with just one click by using the following JavaScript code: const blockQuotes = document.getElementsByTagName(& ...

javascriptcss

Troubleshooting problem with CSS background image

I'm looking to make my webpage more dynamic and interactive. One issue I have is that the background image of the body element stretches when new elements are added, which is not the desired behavior. Any suggestions on how I can fix this? <styl ...

htmlcss

Attempting to utilize parseFloat in order to eliminate trailing characters

The code snippet provided retrieves state names and miles in the format TN 71.6 mi. I am attempting to remove the mi by converting the string to a number while ignoring unwanted characters. Strangely, when using the parseFloat function, it appears to be ...

javascriptjqueryhtml

What is the best way to align two paragraphs horizontally next to each other?

My issue involves two div containers wrapped by a parent div. Inside each child div is a paragraph with a header. When I attempt to align these paragraphs (including the headers) next to each other in the same row, they do not stay together. Instead, they ...

htmlcss

Retrieving parameters using Ajax and JSON from a login form

Here is my question: I am developing a login feature for a jQuery mobile application using a standard HTML login form. Upon clicking the submit button, I verify the correctness of the provided username and password through Ajax and JSON. However, when har ...

jqueryajaxjsonhtmljquery-mobile

Tips for maintaining position when refreshing a web page within a scrolling table

Recently, I came across a helpful tutorial on how to create a table with a fixed header and scrollable body. You can find it here. While the tutorial worked perfectly for me, I encountered an issue when trying to refresh the webpage and maintain my positio ...

javascriptphphtmlcss

Update the button functionality according to the button's unique identifier

I am trying to dynamically change the button's redirect link based on its ID in my NEXT.JS project, but as a newcomer to this framework, I am unsure of how to accomplish it. I understand that this modification should be done after rendering, possibly ...

javascripthtmldomswitch-statementnext.js

Is it possible to use JavaScript to conceal multiple HTML tags simultaneously?

Is there a simple way to toggle HTML elements using Javascript? I have a project with a lot of ascii art and I need a more efficient method to show/hide it without repeating lines of code numerous times. Here's a snippet of the problematic code: ...

javascripthtml

Testing tools for ensuring the functionality and design of the mobile version of a

Is there a way to preview how my website will appear on mobile before it goes live? Most tools I've come across only work for hosted sites. ...

htmlcss

execute a jQuery number counter when scrolling is detected

My jQuery number counter is working perfectly, but it starts running as soon as the page loads. I'm trying to figure out how to make it run only when the element comes into view. Here is my current code: EDIT After some tinkering, I achieved the des ...

jqueryhtmlcss

Empty Textarea Issue on iOS Safari on Mobile Device

I've encountered an issue with a textarea element in a form. After clicking on a button to show the form (which includes dynamic HTML), I can see the textarea element with all its styles applied. However, when I try to type in the textarea on iOS Saf ...

ioscsstextareamobile-safari

Get the additional text using Selenium on Quora using Python

I am currently attempting to scrape Quora answers by utilizing Selenium in Python. For instance, let's consider this link: Upon examining the first answer, I noticed a "more" label indicating that there is additional hidden text. The Issue I encount ...

javascriptpythoncssseleniumweb-scraping

What is the best way to display the current page within a frame in HTML?

Having some trouble creating a frame on my web page. Utilizing the <IFRAME> tag to create it. My file is named Testing.html. Here's an example: <IFRAME src="Sample.html" style="width:800px; height: 250px; float:right; border:none"></I ...

phphtmliframe

Encountered a Three.js error labeled as Uncaught TypeError while trying to follow

I've been following a tutorial on how to integrate three.js into my project from this video: https://www.youtube.com/watch?v=1TeMXIWRrqE I copied the source code provided at the bottom of this webpage: After downloading and extracting the model into ...

htmlthree.js

Using subpixel rendering in the Blink engine causes text to appear fuzzy and less crisp

Have you noticed the recent change in Chromium's rendering engine behavior regarding non-integer pixel values? This alteration has caused text to appear blurry, impacting many websites that utilize the popular transform: translate3d(-50%, -50%, 0); ce ...

css

Customizing the footer on various pages using Footer.php

For the past week, I've been working on updating our mobile site and have encountered an issue with the footer. It loads perfectly fine on the home page but crashes when viewing a regular page. Strangely enough, both pages are using the same footer.ph ...

csswordpress

Image of outer space enclosed by a circular boundary

Check out this fiddle I created here. It's a simple concept of an image inside a red circle. Is there a way to add some spacing around the image within the circle? This is the markup I currently have: <div style=" width: 50px; he ...

htmlcss

Arranging Nav Items in a Stack with Bootstrap 4

Struggling to create a unique navigation bar design with fixed elements on both the left and right sides. The challenge arises when scaling down to mobile, as the icons on the right end up stacking. Any suggestions on how to resolve this issue? <div ...

htmlcssreactjstwitter-bootstrap