I read the suggestions here: White space below footer on my bootstrap pages
When I try this (position: absolute), it fixes the issue, but the lower parts of my website are no longer readable from small screens, because the footer is always overlapping parts of the website's body.
Is there a method to fix the footer as suggested, but still keep the complete body content readable from any screen size?
Depending on your page set up this simple fix may suffice...
footer {
margin-bottom: -20px;
}
N.B. I'm working with Bootstrap 4.
Related
I have a site using jQuery Mobile pages. On desktop and tablet devices (#media only screen and (min-width: 800px)) I want to display the page like this:
My problems:
On some pages, the contents of the 'content' area will be higher than the available height between header and footer, and I would like the scrollbar ONLY for the content (header and footer are fixed).
On other pages, the contents of the 'content' area will have less height than the space between the header and footer. HOWEVER, I need the content area to be 100% of the available space between header and footer in order to lay out it's contents proportionally.
I've tried various jQuery and CSS (calc(...)) solutions, but it's getting quite hacky. Can you give me a simple solution?
I'm having issues with my footer. It's the appropriate width and length but I can't get the text to move.
I've tried toggling with the numbers, using both negative and positive numbers with no luck. I'm using a theme created by another tumblr user, with permission to edit it to my liking, but she won't help me edit it, which is how I got here.
I'd like the text on the left side to be 20px from the left, and the text on the right to be 20px from the right. Both sets of text should be 15px from the top. (These are just guesses- once this problems solved, I'll probably toggle a bit more.)
Here's a link to the coding: http://pastebin.com/c0RdkC4W
Thank you in advance!!
OK, so you have some css being applied to the footer (I assume you are talking about the main site footer rather than the footer for each post.
You need to find the css for the #footer
And apply the following css:
#footer {
padding: 15px 20px 20px 20px;
height: 130px;
}
That is in addition to the properties already applied to that element. It's on line 231 of the full block of html you posted.
I am afraid setting the height on the footer is a hack, you would have to adjust this if you add or remove navigation items. A better solution is to use clearfix.
You also have some inline styles hard coded into the html, this is often frowned upon as it is easier to control the css using classes, id's and element selectors. But sometimes these inline styles get written to the template via the tumblr options.
See how you get on and give us a shout if you need more help.
I have a div in a page (footer) and I want the following to happen with CSS:
If the page has not enough content to fill the window, the div should be at the very bottom.
If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.
If I do it with position absolute etc, I can't get the second case to work.
Any ideas?
I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.
You want to use a sticky footer.
For example: http://ryanfait.com/sticky-footer/
or if you google Sticky footer you find a few alternatives
I'm using sIFR3 to render some text on a website. That site has print feature that will replace the page frame and leave only the text. An appropriate sIFR-alternate style for printing is set as well.
The problem I'm running into is that sIFR puts a CSS min-height as an inline style on the H2 that is replaced. And due to this setting, that seems to be calculated from the font-size given for that element, IE7 cuts off letters like gpq - letters that go below the baseline of the text.
I have tried and googled for a solution but couldn't find anything relating to this issue. Or how I could stop sIFR from setting the min-height value altogether.
You can test with any sIFR Text that falls back to Arial, for example, with a given height on the element it is located in (even non-pixel values).
Thanks and cheers
I had a look at a few projects i implemented with sIFR and i could not reproduce the error you described.
A few suggestions that maybe help:
You could try to work with padding
and margin instead of giving a
height value if that's possible.
Try to define line-height for the sIFR containing element. In both screen and print stylesheets.
Overwrite the min-height value inside the print stylesheet: selector{min-height:value !important;}
Are you sure that it is because of the min-height-style that the descender is cutted? Did you try to remove the style using e.g. Firebug?
In our application we have a text area with row size 20 .
Earlier when we were using the IE6 browser then the text area was displaying properly on screen but after switching over IE7 browser we have seen that after filling up 20 lines a active scroll bar start displaying with text area and only 19 lines are displaying in text area and 1 line is hiding in scroll bar and to check that 1 line we have to use the scroll bar. Please note that our text area's row size is 20 which means it should display 20 lines without active scrollbar which was happening in IE6 browser but not happening in IE7.
We are not sure whether anybody else have faced this kind of problem before.
Guys..as of now we have done some workaround by using bottom-padding to text area.....by doing this all the contents are dislaying properly in text area boxes but still the active scroll bar remains with the text area box.
let us know if you guys having any different solution.
Could you have a CSS rule somewhere setting the physical height of the textarea?
You might try applying the Overflow property to the CSS for the text area. Try overflow:auto; or overflow:hidden;. The last one will eliminate all scroll bars though. You could also try changing the border-width: thin;
I think you are using overflow:scroll, make it as overflow:auto.i checked it,it's working!
In spite of using row="20", try to use a fixed height for the textarea. And don't forget to put line-height. It will definitely solve this problem.