Using "bottom: 0" does not function properly in Firefox when using fixed positioning

I'm working on a basic webpage that includes a textarea element which I want to expand to fill the entire screen, leaving a small gap at the top. Everything looks great in Chrome, but in Firefox, the textarea doesn't stretch all the way to the bottom of the window. Here's the CSS code I've been using:

body#pad textarea {
  position: fixed;
  top: 3em;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;

  background-color: #222;
  color: #fff;
  display: block;
  font-size: 1.2em;
  letter-spacing: 0.6px;
  padding: 1em 2em 2em;
  resize: none;
}

Adding height: 100% does make the textarea reach full height, but that's not the desired effect since I need some space at the top of the screen. Is there any way using only CSS to solve this issue? I really want to achieve the same look and functionality as in Chrome without relying on JavaScript.

cssfirefox

Answer №1

As MDN

When you specify both the top and bottom, and leave height unspecified or set to auto or 100%, the values of both top and bottom will be considered. However, in all other cases where height is restricted in some way, the top property takes precedence over the bottom property.

Therefore, my suggestion for this situation would be to remove top: 3em; and instead add height:calc(100% - 3em);

textarea {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 3em);
  box-sizing: border-box;
  background-color: #222;
  color: #fff;
  display: block;
  font-size: 1.2em;
  letter-spacing: 0.6px;
  padding: 1em 2em 2em;
  resize: none;
}
<textarea placeholder="write..."></textarea>

Answer №2

Unable to understand why FF behaves differently, but here is a workaround using CSS calc()

It seems like Firefox adheres to this specific rendering rule, which results in a preset height and width for the textarea element. This default setting overrides any top-bottom/left-right settings, leading to constraints being applied.

To ensure consistent behavior across all browsers, it is necessary to explicitly specify a height and width. I utilized CSS calc() to achieve the correct height.

(the right and bottom properties can be removed as they no longer impact the final rendering)

html, body {
  margin: 0;
  height: 100%;
}
textarea {
  position: fixed;
  top: 3em;
  left: 0;
  width: 100%;
  height: calc(100% - 3em);
  box-sizing: border-box;
  background-color: #222;
  color: #fff;
  display: block;
  font-size: 1.2em;
  letter-spacing: 0.6px;
  resize: none;
}
<textarea>
write more...
</textarea>

Situations may arise where the top-bottom/left-right properties are required when dealing with positioning. In such cases, a wrapper like the one below can be used for a textarea:

html, body {
  margin: 0;
  height: 100%;
}
div {
  position: fixed;
  top: 3em;
  left: 0;
  right: 0;
  bottom: 0;
}
textarea {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #222;
  color: #fff;
  display: block;
  font-size: 1.2em;
  letter-spacing: 0.6px;
  resize: none;
}
<div>
  <textarea>
    write more...
  </textarea>
</div>

Answer №3

This particular CSS code appears to be functioning properly. You can adjust the padding-top according to your requirements. Check out how it works in this JSFiddle link.


#custom-textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    
    background-color: #222;
    color: #fff;
    font-size: 1.2em;
    letter-spacing: 0.6px;
    padding: 1em 2em 2em;
    resize: none;
}

#custom-container { 
    padding-top: 20px;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
}

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 utilize CSS for capturing user-inputted text in a text field

I have a question about incorporating user input text into CSS styling. Specifically, I am looking to create a color background option (#ffffff) where the designer can input their own color and have it displayed once saved in the body background style. Wh ...

cssbackground-colorshopifyliquid

Seems like JavaScript's .active functionality is failing to function properly in my case

I'm encountering an issue with my website's homepage. I have a list of services displayed, and the intention is for a description to appear when one of the services is clicked. However, clicking on the buttons does not trigger the expected action ...

javascripthtmlcssfunction

Disable the outer div scrolling in VueJS, but re-enable it once the inner div has reached the bottom of

I am currently working on a webpage that contains multiple divs stacked vertically. Here is the concept I am working with: Once the scrollbar reaches the bottom of the first div, the outer scrollbar will be disabled and the inner scrollbar will be enabled ...

javascripthtmlcssvue.js

Persistent hover state remains on buttons following a click event

In my current project, I am dealing with a form that has two distinct states: editing and visible. When the user clicks on an icon to edit the form, two buttons appear at the bottom - one for saving changes and one for canceling. Upon clicking either of th ...

javascriptangularjscsstwitter-bootstrap-3hover

Approach to Using Bootstrap 4 with Intl-Tel-Input

I've been attempting to integrate intl-tel-input with bootstrap 4, but I'm facing an issue where the placeholder for the input is not showing up. I've tried various solutions found online, but none of them seem to work. Here's my HTML ...

javascripthtmlcssbootstrap-4intl-tel-input

A step-by-step guide on crafting a triangular-shaped div connected to another div

After working with HTML elements and trying to incorporate 2 divs, I realized that I couldn't achieve the triangle-shaped div that I actually needed. I have included an image for reference. Below is the HTML code snippet: <div style="background-c ...

htmlcss

Jquery Enhancement for Navigation

Recently, I have implemented a header and footer navigation on my website. The header navigation consists of 1 UL (unordered list), while the footer navigation comprises 5 ULs. My goal is to align the first child of each UL in the footer navigation with th ...

javascriptjqueryhtmlcsssharepoint-2007

Issues with scaling background videos in HTML5

I'm having trouble making a video scale properly with the browser window while still covering the entire area. Does anyone know why my current approach isn't working? HTML: <div class="bgVideoWrap"> <video id="bgVideo" loop="true" aut ...

csshtml

Can I substitute custom tags for the traditional <p> tag?

My HTML with CSS has an issue where a custom HTML tag is not displaying the text while my CSS picks up another tag. Interestingly, replacing <title>Layout Controls</title> with <p>Layout Controls</p> resolves the problem and shows t ...

javascriptcsshtml

Using getServerSideProps in Next.js is preventing the global css from loading

In my Next.js application, I have defined global styles in the file /styles/globals.css and imported them in _app.tsx. // import default style import "../styles/globals.css"; function MyApp({ Component, pageProps }) { return <Component {...pageProps ...

cssnext.js

Tips on customizing the appearance of the "time" input type

Are there any resources that explain how to style the input type "time" completely? I have been searching but unable to find a comprehensive guide with all the necessary style attributes! The only example I came across is: input[type="time"]{ /**styl ...

csshtml

Express.js problem: Unable to load CSS and JS files from the 'public' directory

Currently, I am working on a web project with Express.js and encountering difficulties in loading CSS and JavaScript files from the 'public' folder. Despite following common practices, it seems that something is amiss. Here is the layout of my pr ...

javascripthtmlcssexpressweb

Using CSS to customize the dropdown text styling of a select box within a custom wrapper

I have a specific customized dropdown menu using the styled-select wrapper: HTML: <div class="styled-select"> <select name="example_length" aria-controls="example" class=""> <option value="10">10</option> <option value="25"> ...

htmlcssdrop-down-menu

The reasons behind the unsightly gaps in my table

Here is the HTML code snippet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <script type='text/javascript' src='js/jquery-1.10.2.min.js'></ ...

htmlcss

Switch the orientation of the dropdown menu from vertical to horizontal in CSS

After downloading a CSS dropdown menu from purecss.menus.com, I attempted to modify it by changing the main menu to display horizontally instead of vertically. However, I am now struggling to figure out which part of the CSS code needs to be adjusted in or ...

htmlcssdrop-down-menu

div or paragraph element nested within a flex container

How can I make the logo text div tag, called Title, take up its content space inside the parent flexbox without wrapping? I prefer not to set the Title div to 100% or use white-space: nowrap. I simply want it to behave like a regular div where it fills it ...

javascripthtmlcssflexbox

Ways to widen the header to fit the entire page?

I'm having trouble stretching my header to fill the entire page. I've tried using margin-left and right, but it's not working as expected. My Header CSS: background: green; height: 70px; width: 100%; display: flex; just ...

javascripthtmlcssreactjsmaterial-ui

What steps should I take to design a polished PDF document?

I have been tasked with automating the invoicing system at our company. Currently, all data is stored in a local MySQL database and someone manually updates an Excel spreadsheet, which is then merged into a MS Word template for generating invoices. The obj ...

htmlcssxmlpdfxsl-fo

(Monetate) Resolving the issue of delayed transition between the <a> element and CSS arrow in the breadcrumb menu utilizing HTML/CSS/jQuery

Recently, I've been working on implementing a breadcrumb-style checkout progress indicator on my website using a code generator created by an incredible developer named Jonas Ohlsson. This feature utilizes HTML, CSS, and jQuery and is integrated into ...

jqueryhtmlcss

Tips on emphasizing all div elements and incorporating navigation to each of them

I am seeking a method to enhance a div with highlighting when there is a click or mouseover event. For instance, changing or adding a border color using JavaScript on click or mouseover is straightforward. Recently, I have been contemplating the idea of a ...

javascriptjquerycsshtml