Is padding overlooked when generating vertical overflow?

JSFiddle link showcasing the issue.

When resizing the window to trigger a scrollbar due to the table reaching its minimum size, various problems arise:

  1. The window cuts into the bottom padding of the <main> element without displaying the scrollbar.
  2. The scrollbar only appears when cutting into the content of the table (purple).
  3. The <body> section (yellow) falls short during scrolling, revealing the <html> section (green).

The goal is to have a table that maximizes its height.

By setting min-width:100% in the <body> element, it prevents falling short while scrolling. However, achieving full-height children within it seems challenging.

htmlcssoverflowpadding

Answer №1

Instead of setting the body height to height: 100%;, use min-height: 100vh;. This allows the body to adjust its height based on its contents.

Check out the JSFiddle for the solution.

Update: If you want the main element to take up the full viewport height, set its height to min-height: 100vh;.

Additional Note: To make a table fill the main element entirely, you may need to use a "magic number" calculation that accounts for padding adjustments in the main object.

table {
    min-height: calc(100vh - 32px); /* Adjust for double the padding in `main` */
}

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

Turn off automatic compilation for LESS styling

In my Eclipse environment, I am looking to have LESS compile only when explicitly triggered by mvn package. Currently, any changes made in my less file immediately update the CSS. How can I prevent this automatic behavior? <plugin> <groupId> ...

csseclipsemavenless

Issue with JQuery UI buttonset functionality when using radio buttons with the runat="server" attribute assigned

I'm currently working on a demo application where I need to use radio buttons as buttons. To achieve this, I'm utilizing the JQuery UI buttonset widget. Everything was functioning correctly until I decided to add the attribute runat="server" in o ...

javascriptjqueryhtmlasp.net

Strange Appearance of Angular Material Slider

I am experiencing some issues with my slider and I'm not exactly sure what's causing them. [] .big-container { display: block; padding-left: 10px; padding-right: 10px; padding-top: 10px; margin-bottom: 10px; } .question { display ...

htmlcssangularangular-materialslider

Achieving Perfect Alignment in Dreamweaver: Crafting a Stylish Header Container

Hello, I am currently working on a Dreamweaver site and have created a CSS style sheet within my template that includes a div tag called #HeaderBox. My goal is to make this box 40% of the screen's size, with specific pixel dimensions if necessary. I a ...

csshtmldreamweavercenter

Updating rows within a table dynamically using AJAX

I currently have a table with an empty body: <table id="tablem" border="1" width="100"> <thead> <tr> <th style="width: 10%">PageName</th> <th style="width: 5%">Lang</th> ...

htmlasp.netajaxhtml-table

Interacting with blog posts through comments on both Facebook and the blog's official page on the social media

I'm currently working on a PHP blog and I am looking to integrate Facebook comments into each blog post. My goal is for these comments to be visible both on the website and on its corresponding Facebook page, allowing users from different platforms to ...

phphtmlfacebookfacebook-comments

Make sure the image is aligned in line with the unordered list

I've been having trouble trying to display an image inline with an unordered list. Here's the HTML code: <div class="customer-indiv man"> <a class="customer_thumb" href="/fan/332profile.com"> <img src="http://i.imgur.com/Wi ...

htmlcss

Implementing a click event to convert text to input in Angular 5

I'm struggling with setting values instead of just getting them. I want to switch from using divs to input fields and update the values when in "editMode". <div class="geim__sets"> <div *ngFor="let set of game.sets" class="geim__set"> ...

htmlangular

I have created a Joomla Template that incorporates my own CSS through JavaScript. Is there a method to include a distinct version tag to my custom CSS file, such as custom.css?20180101?

My usual method involves adding a unique tag to the css path in the html section, but my template is incorporating custom CSS through Javascript: if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) { $this->addStyleSheet(T3_TEMPLATE_URL . &apo ...

javascriptphphtmlcssjoomla

The Bootstrap 4 alignment class for centering rows is not functioning as expected

<div class="row align-items-center remember"> <input type="checkbox" class="form-control" checked>Remember Me </div> <div class="row align-items-center"> <input type=& ...

htmlbootstrap-4

Having trouble with my JSFiddle code not functioning properly in a standard web browser for a Google Authenticator

Here is the code snippet that I am having trouble with: http://jsfiddle.net/sk1hg4h3/1/. It works fine in jsfiddle, but not in a normal browser. I have included the necessary elements in the head to call all the external files. <head> <scri ...

javascriptjqueryhtmlcssjsfiddle

Please do not exceed two words in the input field

I need to restrict the input field to only allow up to two words to be entered. It's not about the number of characters, but rather the number of words. Can this restriction be achieved using jQuery Validation? If not, is there a way to implement it u ...

javascriptjqueryhtmljquery-validate

I can't get my <td> to span multiple rows using Razor syntax. Can anyone help me with this issue?

Check out this code snippet (focus on rowspan="6" - it's causing an issue: <table> <thead> <tr> <td>Ingredient</td> <td>Qty (gm)&l ...

htmlcssrazor

a guide on incorporating jQuery ajax requests with node.js

Although I came across a similar question on Stream data with Node.js, I felt the answers provided were not sufficient. My goal is to transfer data between a webpage and a node.js server using a jQuery ajax call (get, load, getJSON). When I try to do this ...

javascriptjqueryhtmlajaxnode.js

Update in PHP/MySQL database triggered by user interaction through a button click

I'm currently experiencing an issue with my login system where it displays "Wrong username or password" when I first open the login.php page. My question is, how can I ensure that the system only checks for the username and password when the user cli ...

phphtmlmysqlonclick

Utilizing Two Buttons with Distinct Functions Within a PHP Webpage

My PHP page includes two buttons: Save and Submit. The Save button is used for saving form data, while the Submit button is used for submitting the final data. <button id="save" name="save" onclick="saveForm();">Save</button> <button id="s ...

javascripthtml

Guide to selecting HTML components from an Angular service

Within my app.component, I have integrated a component called comp1. The HTML file for comp1.component.html contains buttons defined as follows: <button #myButton (click)='function()'> Temporary </button> <button #myButton2 (click ...

htmlangularrxjs

Two-sided vertical CSS menu

I'm struggling to design a layout with two vertical menus flanking the main content section. Despite experimenting with different combinations of inline, relative, and fixed positions, I can't seem to make it work. Here is the Fiddle link for re ...

javascripthtmlcss

Retrieving the Content of Textarea Following Form Submission

When attempting to retrieve the value of my text area after submitting a form, I utilized the following command: $message = $_POST['message']; Unfortunately, this approach did not yield the desired result. This may be due to it not being an inp ...

phphtmltextarea

Exploring anchor navigation with the help of the <a> tag within a React component

I am currently working on implementing anchor navigation within one of the page components in my React app. My goal is to achieve a similar functionality as demonstrated here in draft.js, where subheaders are used as anchors with a link icon next to them, ...

htmlreactjsanchor