I have a simple page with a fixed sidebar (navigation) and a content area that scrolls normally. Sidebar position:fixed, content area normal.
The sidebar (if taller than the browser) uses a scroll bar to show the rest of the sidebar content. Thats cool, it works like its supposed to.
I'm trying to get the sidebar, onload, to set its height as tall as its contents, so there is no scrolling. So if the sidebar is 2000px tall with all the content loaded in, onload the height is set to 2000px so there is no scrollbar. It will just make the fixed sidebar 2000px high.
Is this a min-height issue? I feel like there is a simple way to do this but I have been at it so long I cant figure it out. Ive used scrollHeight, height(); etc. and cant get a solution.
Thanks
Remove the css height to allow the div to expand, set overflow:none;
Otherwise similar questions and answers here:
Make div 100% height of browser window
This is what I understand from the question, since there is no code submitted.
If you "mesure" contents height after pageload, you can set your sidebar height to this value.
document.ready(function(){
contentHeight = $("#content").css("height");
// set sidebar height
$("#sidebar").css({"height":contentHeight});
});
Place it at the end of the page, so it will be executed after pageload.
I'm not sure this will remove the scrollbars, since it appears when height is more than viewport.
You'll have to set css for the sidebar to overflow:hidden.
Related
I have a scrolling issue that might be common but I can't seem to find it. Essentially, I have a scrollable section of a webpage that goes from just below the header to the bottom of the screen. However, to make that section scrollable, I have to set a height which I set as 70vh, while the header is a static height. When the viewport changes height, to a larger screen for example, the 70vh isn't enough to reach the bottom of the screen because it now should proportionally take up more space.
My question is, how do I make it so that the section is always the correct height when the viewport changes size. An idea I had was to find the percentage of the viewport height that the header is taking up and then detract that from 100 variably, but I have no clue how to do that.
I can't add images in my post yet but this is a link to what the section looks like
You can use calc()
.scrollable {
height: calc(100vh - 80px /* Height of your header */);
}
However you will need to do this for each breakpoint on your website, that changes height of your header, and 100vh can sometimes be obstructed by a browser's "elements" like URL bar on mobile etc.
There are a lot of pdf pages that is wrapped by div in a page. When they were zoomed by increasing div's width and height, scrollbar lose its position.
How can I fix it like this example?
As you see in the example, when you zoom anywhere in the page, scrollbar didn't lose its position and it acts as a sticky.
What is your suggestion?
I am writing a single page app for mobile use antd-mobile,
There's s a Tabbar on the bottom of the page, and a list of items that u can see the background is gray, the problem is the Tabbar cover the content of the when I scroll down to the bottom.
How can I make the list area to be scroll area not the whole page?
Some code could help us help you... But there is multiple strategies you could use, all depending on your actual code and what you'd prefer to achieve.
Use margin-bottom on body. This will add a margin to the bottom of your pages, having it set to the height of your Tabbar, this will ensure that it never hides the bottom content. That is assuming your Tabbar is in a fixed position. This solution will make the scroll bar show on the entire page.
Use a defined content holder height, and set overflow-y:scroll. You could set the height of your content holder to be 100vh minus the height of your Tabbar. This way it is "fullscreen" and you can then apply overflow-y:scroll to make that part scrollable. This will display a scroll bar on the element, not the entire page.
I'm editing a wordpress theme and I want the main content area to be larger. But when I enlarge it beyond the limits of the screen it does not scroll. And I know the most common cause of this problem is position: fixed, but I only found two cases of this in the code and when disabling both it doesn't fix the issue.
The original code makes a div with the id of "content" have a scrollbar, but I made the div much larger and so I want the scrollbar to appear and be back in the default spot like most pages have it.
Resources: Here is the original page for reference. (You can just inspect the code from there since I haven't made any edits to it yet anyway.)
http://themes.themolitor.com/wpzoom/2011/04/first-blog-post-title/
You page has been setup in such a way that, a javascript file is placing an inline style to the content, and giving a dynamic height depending on the screen size.
and the content id has a overflow auto, which gives a scroll bar when the content overflows outside the parent element.
So if you wan to have the scroll bar removed either do "overflow: hidden;" (this will hide the content which overflows unfortunately.
Or you will have to rearrange the whole page structure.
Your problem seems to be in http://themes.themolitor.com/wpzoom/wp-content/themes/wpzoom/style.css, where html and body are set to overflow:hidden. If the content extends past the end of the page, it will not scroll. You can change it to overflow:auto (auto adds a scroll bar when there's too much content to fit), or you can just get rid of the overflow property because auto is the default behavior.
overflow:scroll /* always show a scroll bar */
overflow:auto /* show a scroll bar when the content of a box is bigger than the box itself */
overflow:hidden /* never show a scroll bar */
I need to do fixed content page and scrolling side bar. But content sometimes have height more than the browser windows. How scrolling sidebar but watch content on the left?
That is exactly what ..
CSS Positioning
.. was created for.
Try making the content fixed and the right div relative.