Always i try to not ask about my problems, google about it etc. But now i have big problem with my code. I have http://html.bpcoders.pl/4hero/ left sidebar always visible, there is fixed position but content is bigger than height of sidebar and part of content is outside screen.
I dont have any ideas how i can do it for good utility. Did You have ANY ideas about it? Sorry for my englisj is not my first language .
Add a scroll to your side bar by doing the following:
on you element, add the css overflow-y : scroll;
so your element head would look as follows:
<aside style="overflow-y : scroll">
Related
I am working on a site with a header at the top and a main content area. The header does not scroll but the main area does. This means that I have a scrollbar to the right of the main area but not to right of the header and they do not line up:
In this image the red bar is the content and the orange bar is the centre section of the header that should be in line with the content.
These are both aligned using this css:
.center-content {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
What is the best approach for this?
I was thinking of just adding the scrollbar permanently but I don't really want to do this. I could then just add some padding to the left of the main section to re-center it. Alternatively I could add padding to the right of the header.
Questions:
How would I change the style of the header based on wheather the main section has a scrollbar?
How would I add padding to the main section based on wheather it has a scrollbar?
How to I get the width of the scrollbar? Is this guaranteed to be the same across all browsers (I need to cater for mobile as well)
I have created a JSbin for this that demonstrates the issue.
I am using the material-design-lite style sheets for this.
You will not want to change any styles based on the scrollbar - I think that's too complicated and it would almost certainly involve javascript. Scrollbars are also not consistent across browsers/mobile. A better option would be to fix the header to the top of the page, and make the content div's margin-top equal to the header's height. Then the scrollbar, when it appears, will be to the right of the entire page. See an example here:
http://output.jsbin.com/xuroyaceli/#
Resize the window to see how it looks with a scrollbar.
Working on a new design using bootstrap3 and trying to stretch the page so that even if there's not enough content to fill the page, the footer section would stay to the bottom.
The reason why I'm using position absolute, is because there's a link from the billing software that's being added within the content, I don't want to remove the link but position it a bit to the bottom in the footer section, in the center bottom, thus since I can't control where this will appear(do know where appears, just can't control), using position absolute on the specific element helps me here.
Now, that's not issue, just saying why I need to use position absolute and why I made the divs like this:
wrapper
>>wrapper_content
>>wrapper_footer
fiddle: http://jsfiddle.net/raicabogdan/jsk1b7ua/4/
the footer section is properly set to the bottom, however for some reason, the wrapper_content does not go 100% height automatically on load or on window resize. Also if you resize to mobile view, content will go down few table rows.
The content goes under the footer section.
What am I doing wrong here? Left a fiddle of the html page along with some css that I felt were needed above.
Hope there's someone that could get me out of this.
Cheers.
Try this link. I have used this method to get the footer to stay at the bottom of the window.
http://ryanfait.com/sticky-footer/
I am currently helping a friend with a very simple, responsive 1-page site which can be viewed here.
If you drag your browser window down to about 450px in width or less, you will see that the layout changes which is correct. However, when you drag vertically to make the page shorter, the content in the middle gets hidden/covered.
I need for the text in the middle to always be visible, even if the user needs to scroll/swipe to see it. NOTE: It is the whole body that I would want to scroll, not just the content div.
In this image, you can see that the text is covered if the viewport isn't very tall:
On the div that contains the main content, I have tried setting height and min-height as well as using !important to no avail.
I must be missing something obvious. Any help is appreciated.
Set the div named "content" the style: "overflow-y: scroll;"
<div id="content" style="overflow-y: scroll;">
<!-- content -->
</div>
body {
overflow-y: scroll;
}
Updated to be the whole document.
Basically, I'm trying to make my first website, ever, and I'm having trouble already.
I'm making the navigation bar and it's all looking good, but as soon as I put my browser into windowed mode, the navigation bar extends beyond what it was, so I have to scroll sideways to reach the end of it.
P.S.
I'm new to stackoverflow, still trying to figure it out.
So I might do something I'm not supposed to, just let me know and I'll try to fix it.
Edit 1:
I'm using Google Chrome.
Here is the JSFiddle with full code:
http://goo.gl/Z5wvTn
If you look at the header and footer, you should be able to see that the main section and navigation bar is actually wider than them.
The navigation bar and main section are within a div, while the other elements arent.
This effect is on a much larger scale without JSFiddle.
You want to create something like this: JSFiddle
If yes, then use % or emin place of pixels
Place the header and footer in the wrapper div and then decrease or adjust the width of the .wrapper div in your css.
jsFiddle
Based on what #Aayushi Jain and #Shivam said use wrapper with percentage. That way, your wrapper will respond according to the window screen.
Look up responsive design if you want to know more about it.
My version would be to add width:100% on your wrapper instead of defining fixed width.
Also, practice on using ems and % like #Aayushi Jain said.
.wrapper {
width: 100%;
}
For a lot of you this is easy but it's making me mad:
I have a webpage (black area) where div (red area) contains some content which I don't know how much is.
If the content is less then it needs to reach the logo, the logo should stay positionend in that point of my div, it shouldn't go up.
If the content is more, it shuld go down (keeping a fixed distance from text)
How to achieve this?
The min-height CSS property:
div { min-height:400px; }
http://jsbin.com/oxodak/2/
You want a "sticky footer", but contained inside a div instead of the whole page.
Tweak the method shown here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/