We have long table and I want the horizontal scrollbar to always appear in the bottom of the viewport.
We don't want to use a custom sidebar.
I've seen this question: How can I make the horizontal scrollbar for a DIV always appear fixed on the bottom of the page? but I want the table to be long (and not to set height on it) and to have one main scrollbar on the page (we have more widgets).
I tried:
.containerClass::-webkit-scrollbar { position: fixed; bottom: 0px;}
but it didn't work.
Any idea?
Related
I have a button I need to position at the bottom of the page in the right side.
https://jsfiddle.net/zuk80g6L/
button {
position: fixed;
right: 16px;
bottom: 16px;
}
That button should move further into the screen (like right: 24px if we assume the scrollbar is 8px wide), when the scrollbar is visible. Right now it just pretty much says the total view is 1920 pixels wide. The button should always be 16 pixels from the right side.
I need to take this into account:
Is the scrollbar visible
What's the width of the scrollbar
What if there is a scrollbar, but it isn't changing the site (like on a phone)
It has to be fixed
Basically if there is a scrollbar, move the button further left onto the site.
How is something like that possible? Thanks
Use these solutions to get if scrollbar is presented:
How can I check if a scrollbar is visible?
Detect if a page has a vertical scrollbar?
Based on that trigger the class/css for the button, like
if (hasScrollbar) {
/* Move button right for 8px */
}
In addition, you can get scrollbar width
I have done some modifications on you code.
First I added a div that i used as a container and gave it Id #content
to check if the scroll bar is added to the page check the height of the content div and the window height. if the window height is smaller then the scroll bar is added and we give the button a right 24px;
here is the js script that does the job
var contenth = $("#content").height();
var windowh = $(window).height();
if (contenth>windowh){
$("#bottom_button").css('right','24px');
}
and the updated jsfiddle
P.S it cannot be made without css.
I have some text that I display in a div with the following CSS:
.fixed-box {
position:fixed;
top:10px;
width: 270px;
}
This is so that when I scroll it always shows on the top of the screen. However when there is a lot of text the div gets cut off, because the position:fixed prevents it from scrolling down with the page it's on.
I was going to switch to an iframe, but is this really the best way to go?
Add overflow:auto; and set height property either to 100% or manually.
Here is code example http://jsfiddle.net/7ZVb8/
I am working on a responsive website using the Skeleton Grid and have a left floated navigation bar div that is 100% height of the browser window. It works in all browsers I've tested except for mobile safari on the iPad. In mobile safari the navigation div is 100% of the viewport, but when you scroll down on the page the div does not stretch to the bottom of the content. [See image below].
How do I make it so that the div is 100% height on the iPad, not just 100% of the viewport?
Dev Site: http://www.id8agency.com/jeremiah
Screenshot of the problem: http://www.id8agency.com/jeremiah/jeremiah.png (as you can see the white bar on the left does not stretch to the bottom of the page once you scroll)
How it should look: id8agency.com/jeremiah/jeremiah1.png (sorry, I don't have enough reputation to post more than 2 links)
Things I've tried:
Set height and min-height to 110% (works, but creates a scroll bar on
the desktop site)
Set height to height of content (works, but not all pages will be the
same length, so creates a scrollbar on some pages where content is
shorter)
Set position:absolute and and position bottom:0px (doesn't work,
positions the div at the bottom of the viewport, not the bottom of the page)
Set meta viewport tag to height=device-height and height=1000 (breaks
the responsive functionality of the website)
Thank you for any help you can provide!
try having the .navigation element be position: fixed; and then place the the content in the right in its own wrapper (something like .content-right).
Then set these properties on the .content-right element include a media query "reset" for when everything goes to one column (XXX is the breakpoint):
.content-right {
margin-left: 240px;
}
#media screen (max-width: XXX){
.content-right {
margin-left: auto;
}
}
Why don't you put on outer div and apply the background of the sidebar (sliced so it can be repeated on the y axis) to it and repeat-y?
It will expand up to the content end and when you don't need it anymore, you can remove the background from the media queries.
The problem also appears when I set my desktop browser viewport to a small height. I think the problem is, that all the 100%-heights here are relative to the viewport, and I think you want the navigation bar to be the height of the content, not the viewport.
But possible solutions would be to set a faux column on the #container-element (see http://alistapart.com/article/fauxcolumns).
Another possibility would be to measure the height of the #container-element with jquery and assign it to the navigation-bar. Something like:
var containerHeight = $('#container').height();
$('#navigation-container').css('height',containerHeight);
(I haven't checked if it works, but I think it should.)
I have been working at this for the past day and a half. So any help will be greatly appreciated.
The general layout has a top bar and a side bar which are position fixed. I want the content container to fill the rest of the page without a scroll bar unless it is necessary due to content. I am not sure if it is possible to do purely in CSS or if I will need to modify my html structure as well. I have posted a fiddle below to show the most simple example possible.
http://jsfiddle.net/wU2Hd/
Again, any help or pushes in the right direction will be greatly appreciated, this has been throwing me for a loop.
It's not impossible. Check out this JSFiddle I forked from yours.
I did not need to change the HTML structure, but there were some important changes made to the CSS.
First I removed the height: 100%; from html, body. This was forcing the scroll bar to appear.
Then I removed the height and width declarations from .content, and gave #shell-content absolute positioning:
#shell-content {
background: #FFFFFF;
position:absolute;
left: 100px;
top: 86px;
bottom: 0px;
right: 0px;
overflow-y: auto;
}
The left and top are values based on the explicit height you gave to your header and the explicit width you gave to your menu. The overflow-y: auto tells it to only show the scroll bar if the content out-grows its available space, but not otherwise.
The JSFiddle has some crazy-long lorem ipsum text to show the effect. If you change it to less text, the scrollbar will disappear entirely.
The problem is that you are setting
#shell-content{
height:100%
}
body{
height:100%
}
Which means the body fills to fit the window, and then the shell-content expands to fill that space (the EXACT size of its direct parent), but is displaced by shell-top-wrapper, so it overflows. You should either decide on a relative height for the shell top wrapper, or change the height of the shell-content dynamically (using javascript).
Here is a take off of your fiddle: http://jsfiddle.net/eeMz4/. You'll see that with the large image in the content area, it scrolls. If you take the image OUT and replace it with text or something smaller than the available space, the scrollbar goes away.
The trick was adding overflow:auto to #shell-content.
Cheers!
Cynthia
I made a few small changes: http://jsfiddle.net/wU2Hd/5/
- remove the height from content
- remove the height from content-shell
- set the body background to white
- set the sidebar background to grey
This will not actually stretch up the content, but it will appear like it does. Scrollbar will appear automaticly when the content becomes bigger then the viewport.
i have a problem with the entire content of my page.
The problem being without a scrollbar present my content is about 20px to the right, but when a scrollbar is present it shifts to the left.
I have to compensate for this for an absolute postioned div by positioning it over the content by 20px until a scrollbar is present as it rests at the right hand side of the page.
This is a crappy fault on my behalf but i just want an easy way to fix this. Any quick and easy suggestions? Would i be better off making the main content div an absolute one?
One quick and dirty way is to always force the scrollbar to be visible with:
html { overflow-y: scroll; }
Not ideal, but it standardizes the appearance if the lack of scrollbar offset is breaking your design.
If I'm understanding your problem correctly, your absolute div is 20px off when a scrollbar is present? If that is the case what you can do is set a parent div that wraps around your content and absolute div.
Be sure to set this wrapper div to position: relative; so now your absolute div will be positioned inside the relative div instead of the document level. If there is a scrollbar, the wrapper div will be offset to the left by 20px (the width of the scrollbar) and the absolute div will also.
<div class="wrapper">
your content goes here
<div class="absoluteDiv"></div>
</div>
.wrapper { position: relative; }
.absoluteDiv { position: absolute; }
I don't think your content is actually shifting in any sort of buggy way; it's just that the presence of the scroll bar makes the viewport narrower. If you're using a layout that depends on viewport width (e.g. fluid layout, or fixed-width with centered content), this will cause everything to move by half the width of the scroll bar when it appears.
AFAIK, there's no sure-fire way to compensate for that, since the width of the scroll bar isn't known.