Each page of my site has a footer (one for all pages), it has the parameter position: 'fixed'. Accordingly, this means that the footer is always attached to the bottom of the browser, regardless of the screen size and information on the page.
There is also a table on several pages of the site.
The problem is that sometimes a white gap appears between the table and the footer (this happens when testing on screens of different sizes, or simply when changing the browser zoom).
Yes, the most common advice is to add a min-height. And it kind of works. But in this case, with standard screen sizes, the distance between the table and the footer is large (yes, this is not a problem, but it is better to avoid this).
Therefore, I ask for your help in solving the problem.
The code below is responsible for the formation of the page and styles
export default function Devices() {
return (
<div style={styles.Style}>
<Table />
</div>
);
}
and the following code forms the footer
export default function Footer() {
return <Grid container sx={styles.Footer}></Grid>;
}
When I have this issue, I just style the body tag to match my main container, and set the min-height to 100vh.
This way the body will be its natural size when you have content, but will always fill the view port regardless of client screen dimensions.
In your example, it’s just
body {
background: red;
min-height: 100vh;
}
Related
I am having issue of large white spaces appearing on the right and the bottom of the web page. When testing for responsiveness of the web page.
I found a similar issues on stackoverflow
White space showing up on right side of page when background image should extend full length of page [closed]
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
Solution in both the posts are same
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
I don't know where exactly to add this in the gatsby, I found a post with a similar issue to mine regarding gatsby How do I style the body / background?. Don't seem to understand what is the solution for this!
Found this post How to add a dynamic class to body tag in Gatsby.js? got some idea about using react-helmet, how exactly I can use it?
Could anyone explain how I can set the html body in gatsby, to avoid this large white space?
Resolution 1366x768 area under the bounder is the whitespace
Resolution 1920x1080 area under the bounder is the whitespace
To add global styles (such as the ones you're talking about), you have multiple ways to follow. The easiest one is to use gatsby-browser.js file. I will provide a solution for your use-case based on my paths, adapt it as you wish.
Create a global.css file in /src/styles/global.css and paste your code:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
In your gatsby-browser.js file, import your global styles:
import './src/styles/global.css';
Basically, you are adding global styles using CSS files for your project.
There's a huge lack of details in your question but I guess that white part is the footer of the site. Since you don't have any content pushing the footer at the bottom of the page, it appears flexible as it could.
P.S: I've committed How to add a dynamic class to the body tag in Gatsby.js?'s solution since you don't need to add dynamic classes. To make the footer always sticky at the bottom of the browser, you need to make a few adjustments. Wrap your <Layout> with something like:
import React from "react"
import Navbar from "./navbar"
import Footer from "./footer"
import Sidebar from "./sidebar"
import '/yourStyles.css'
const Layout = ({ children }) => {
return (
<section className="site-wrapper">
<main>{children}</main>
<Footer />
</section>
)
}
export default Layout
And add the following CSS (in your /yourStyles.css or in your global styles)
.site-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex-grow: 1;
}
Basically, you are telling the wrapper (site-wrapper) to expand until filling the viewport (100vh). Since your main tag (change it to the desired class if needed) can grow free (flex-grow: 1) so your footer will be always at the bottom of the page because it's pushed by the rest of the flexbox column.
I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here
You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}
What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page
I've searched tirelessly and although I've found many people asking about this problem, there don't seem to be any consistent solutions.
We have a page on which a user can enter a date range, then press submit to return a table of data. A "print" button exists which obviously prints the generated data.
All browsers seem to be able to split the long table into several pages, as expected. We can also get some predefined footer text to show up on each page by using a footer div with some CSS like this:
.footer {
position: fixed;
bottom: 0;
}
The only problem is that the table rows have inconsistent heights, so on some pages there's plenty of room for the footer, but on other pages the table and the footer overlap.
Things I have tried:
#page {
margin-bottom: 10mm;
}
Adds a margin, but the bottom: 0; fixed position of the footer is now considered to be too high up, i.e. there's still an overlap but with a bunch of space at the bottom of the page. Setting the bottom property to a negative value just makes it appear at the top of the next page instead.
#page {
padding-bottom: 10mm;
}
No noticeable effect at all.
...And that's pretty much all I can think of. What can we do about this? Do we need some kind of custom JS solution to calculate the number of rows on each page and insert a footer manually? There must be somebody who has had success with printing footers; it doesn't seem like an uncommon requirement.
Please try to add this at the bottom of css file or after the last body affecting rule eventually adding also !important:
#media print {
body {
padding-bottom: 10mm;
}
}
There may be a more elegant solution, but you can do this in JS with an algorithm along the lines of:
while there is still vertical room left...
output a row to DOM
measure height of new row and recalc how much vertical room is left
For getting the height of an element, you could take a look at this other answer.
That may seem like a pain, but you'll have a lot of control over your rendering, and it should work fine.
i was having the same problem last day i search for hours to solve it. the solve was
adding these to css.
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
ps: don't add relative position to the table never because it wouldn't work properly.
Not really sure how to go about this. Basically, my page has a header, nav, body and footer contained in a wrapper, all of which is contained within the body (of course). The wrapper is set to fill 60% of the screen and be centered. The header, nav and footer will always be the same height and simply fill the wrapper, width-wise.
The main section, however, has variable length content (paragraphs, images, articles, sections, etc). If I have a lot of content in the main section, the page fills up, stretches out and scrolls like normal. But if I have just a little bit of content in main, the page isn't long enough and the footer ends up about halfway up the screen (or however high it needs to be to follow after the tiny main).
What I want to do is ensure that the body and/or wrapper stretch to fill the height of the screen, even if the main section isn't necessarily long enough to force it to be that tall. I have tried making the body and wrapper height: 100% but the wrapper is still not extending. If I set the footer to position: fixed, the footer sizing freaks out and the wrapper borders do not extend down.
Given these problems, I think the best solution would be somehow increasing the main section's height so that it and the other elements always add up to a minimum of 100%, but I can't figure out how to do this. This has stumped me for a week, so any help would be greatly appreciated!
This may work. It just styles both your body tag, your wrapper, and your HTML to fill the height of it's container.
html, body, #wrapper {
height: 100%;
}
I don't think I can be more specific than that without a simplified version of your HTML / CSS.
--edit--
I forked your JSFiddle with a working example. All I did was add the above snippet into the CSS.
As Eclecticist already stated. You need to set your html and body to 100% height. That is necessary because the wrapper-element inherits the height of the parent. Therefor setting the wrapper to 100%-height will never get it bigger that it's parent.
In addition to Eclecticists answer I would recommend you to set the wrappers min-height to 100% so the content won't run out of the container as soon as it exceeds the window height:
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
}
I have a flex component like this:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
...
width="100%"
height="100%"
creationComplete="init()">
.......
<components:NavigationBar id="nagivationBar"
left="0" bottom="0" />
This is supposed to show at the bottom left of the screen considering that parent container fills the screen.
The behaviour I just described shows perfectly with Safari
with Chrome it shows correctly if the download bar beneath is not visible but as soon as the download bar has something it covers the bottom part of it.
and FireFox seems to always hide like 50 pixels or so from the bottom of the screen.
It seems like every browser renders the 100% height in its own way.
What is your recommended best way to overcome this? I can add a 100 pixel margin at the bottom but it's not something I want to do in this application.
Try something like this in the <head></head> section of the HTML page that loads your Flex Application:
<style type="text/css">
html, body{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
overflow: hidden;
}
</style>
Not sure it will help in your case but it's easy to try.
You could wrap the output in a containing <div>, then using YUI's getClientRegion, and a resize event for good measure, set the containing div's CSS height property to the value which YUI has determined the available viewport vertical space.
Sorry the solution is an outside-of-Flex one, but it'll work.
Edit: I meant 'getViewportHeight()' not 'getClientRegion()', sorry, check out the APi docs though, there's plenty of goodies in there for this sort of stuff.
Flex is just a flash component in a web page. Its size depends of what is outside of flex. I don't think you'll get a proper answer unless you post HTML/JS code surrounding flex app.
PS. From my experience working with browser height may be very troublesome.
this normally happens when you have one or more positioning elements in a page. Check your code to see if you have used the position element anywhere else in your code, if so are they different, i.e one relative and the other absolute, if so this could be your problem, its reccomended that they are all the same, ie all relative