So I have a problem with empty space at bottom of the website. Here is website: click
Repo of website: https://github.com/bdevelops/feditor
I read questions on stack, tried to find solution, but nothing works.
Sorry for bad English, if it is.
In your CSS class .box is margin-top:30px or height:100%. This is what makes white space at the bottom of your website
box {
background: #fff none repeat scroll 0 0;
box-sizing: border-box;
height: 100%; **//Set it to "auto"
margin-top: 30px; **//or this one, change it to 0px or remove**
overflow: hidden;
width: 100%;
}
Related
I got a sticky label inside another div. So when I scroll horizontally through the divs, the labels stick to the left side of the screen as long as the next div comes, which is exactly what I want. Code:
.foo-bar-label {
display: inline-block;
max-width: 100%;
left: 0px;
position: sticky;
height: 16px;
overflow: hidden;
}
.scale-unit {
border-left: 1px solid black;
box-sizing: border-box;
padding: 0px 6px;
height: 16px;
}
Now when I scroll to the right, the leftmost label finally gets overlapped by the left corner, which is the expected behavior.
(The object to the left, which overlaps the label has the same background, don't mind that.)
Question: How can I, hopefully with pure html / css, prevent the case, that a label is partially hidden, instead it should be completely invisible.
P.S.: A solution would be sufficient, which helps me to hide a div completely, IF some of its content overflows!
Thanks in advance!
I'm currently using React and I'm having issues getting a div to equal 100% of the height of the page. Originally, I had an issue with there always being about 24px of empty space above the body. I couldn't fit it no matter what. I eventually used this on my app.css (a reset)
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
It fixed the issue, but still, a measurement of 100% or 100vh doesn't actually equal 100% of the total view. Here's a screenshot of the page:
https://gyazo.com/3407b6bd0032f402f3bb97acdb725e40
The blue div is a div that fills 100vh. Yet, it doesn't fully fill the page. I tried 100% as well.
Blue div:
.loginWrapper {
margin-left: 260px;
height: 100vh;
background-color: #29B6F6;
}
I noticed that the html had this styling on it, yet even when removed no changes were noticeable:
html {
box-sizing: border-box;
}
If someone could please explain this phenomenon, I would be very grateful. If you need any extra information, just let me know. Thanks!
You will have to reset the basics margin and padding if applied from html and other top level tags.
body, html {margin: 0;padding: 0;}
Or just use something like reset.css
http://meyerweb.com/eric/tools/css/reset/
This has got to be the most resilient footer i've ever seen in my life. Please observe subject A:
URL: https://xavier-jackson-ovac.squarespace.com
Hello, this website that I'm working on, I'm trying to find a way to have the background of this page to stretch the entire window no matter how i resize it similar to a cover page but theres always that grey footer underneath it. I tried:
in Code Header injection
<style>#header {
display: none !important;
#preFooter {
display: none !important;
}
#footer {
display: none !important;
}
#page {
width: 100% !important;
min-height: 700px !important;
padding:20px !important;
margin: 0px !important;
max-width: 100% !important;
}</style>
In page settings
<style>
#footer {
display: none !important;
}
</style>
It gets rid of the footer content and the prefooter, but for the actual footer? Nothing worked....
How can I have it so the background stretches the entire window? I'm basically trying to make it look like a cover page but with html functionality so i can add things like javascript / jquery. I have a similar theme using this template but I just need to get rid of that pesky footer. Help?
Its the white block at the bottom of my current page. Please help me destroy it... http://prntscr.com/aaelvf
it's the grey block on the bottom the standard template. Please help me destroy it... http://prntscr.com/aaeo8m
All help is appreciated. Thanks.
The footer IS hidden (you've hid the hell out of that thing). What's left is just an empty html tag. You'll need to add some content to make the page wrap further, or set the height initially to be higher (which will at least give it a white background), ie.
#page {
width: 100% !important;
min-height: 1200px;
padding: 20px !important;
margin: 0px !important;
max-width: 100% !important;
}
However, idk that you want to set the page to be 1200px by default. You might want to take a look at the image itself, and adjust the height that's being set by squarespace (806px).
style="top: 0px; left: -135px; width: 1210px; height: 806px; position: relative;"
I've got a simple page, and I'm trying to set a border on the bottom of my page's body in CSS like so:
body {
height: 100%;
border-bottom-color: #ad3127;
border-bottom-style: solid;
border-bottom-width: 5px;
}
This works great if I've got enough content to fill the whole window, especially when it needs to scroll: the bar appears at the bottom of the page (not the window. I don't want it to be floating over content or anything like that).
The problem is when there's not enough content to fill up the whole window, the bar just appears at the bottom of whereever the content ends. This sort of makes sense, but it's obviously not what I want.
I've tried something like
html {
height: 100%;
}
Which seems to work in both cases, except when I resize my window it gets mangled (at least in Firefox 4) and in Mobile Safari it renders at the bottom of my viewport (ie kind of just in the middle of my content). So this does not appear to be doing it for me.
There must be a way to solve this (with as little sorcery as possible, please :)).
Instead of height: 100%, use min-height: 100vh:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
Because of box-sizing: border-box, border of the body will be accounted in the body height. The only hack here is for content margins pushing the border below viewport, which is fixed with an arbitrary padding-top value.
Chris Coyier did an interesting article on body borders a while back. Here is the link for reference: http://css-tricks.com/558-body-border/
To do what you want, the most cross browser way would be to create a div that acts like a border, and then give it a fixed position of bottom 0. Something to this effect:
HTML:
<div id="bottom"></div>
CSS:
#bottom {
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}
A little bit less hacky way, albiet less compatible with older browsers is to use pseudo elements:
body:after {
content: "";
position: fixed;
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}
I'm using a sticky footer for the first time with a site I putting together, however doesn't seem to be going as planned. There appears to be a large white space, and then a black area (this is the color of my footer) please see link http://c-hall.the-word.com/assignment/whatwedo.php I need the footer to butt up to the bottom of the last bit of content, in this case the text witch is yet to be styled. Please see code below - thanks for your help - Charley
CSS
/* sticky footer */
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -335px;
}
.footer, .push {
height: 335px;
background-color: #000;
}
#innerfooter {
width: 847px;
height: 335px;
position: relative;
background-image: url(../images/black_bar.png);
background-repeat: no-repeat;
text-align: left;
margin: 0 auto;
}
/* end sticky footer */
Try this out for size, this will stay at the bottom of the page if the content isn't long enough and prop up the bottom if the content reaches it http://ryanfait.com/sticky-footer/
Look at your html structure (Especially at the .wrapper div.). The placement of the div is wrong.
And read this link: http://www.cssstickyfooter.com/
You are always going to have this gap because the position of your footer is static so it's fixed to the bottom of your browser. This white gap is your body background width unused space. So fill it or eliminate it by less width of your page or any other approach you find appropriate !
The point is I'm not giving you a precise solution but it's more important to understand what you're doing not just applying tutorials.