I've got your stereotypical two column (1 content, 1 sidebar) layout with each column floated opposites and all that. But I need my sidebar to scroll with the page. My first instinct was to use position:fixed, not realizing it would mess up my floats. So I'm not really sure what to do. I'd rather not absolute position the two columns if I can avoid it. This website is more or less completely coded and I only found out about the need for the sidebar to scroll in the last leg of the process. So it's kind of a PITA to do too much to it.
So essentially I need a way to make a floated DIV to act as though it's under the affects of position:fixed
My thought was ideally maybe a javascript/jQuery solution that just latches onto the div and makes magic happen? But I'm open to a CSS solution if it's a quick/easy one.
I'm guessing that your problem with making the sidebar position: fixed is that it takes it out of the flow, so your main content shifts over to the left, under the sidebar. If that's a correct interpretation, then add margin-left to the main content with the same width as the sidebar, e.g.:
.sidebar {
position: fixed;
width: 200px;
}
.content {
margin-left: 200px;
}
With only two columns, there's no need to float the main content. Adjust as needed for your particular situation (e.g. change units to em or whatever).
Related
I'm working on an enjin site for a friend and cannot for the life of me understand how to make the page here stretch to fill the whole screen vertically if the content does not have enough in it to do it on it's own. I've tried scripts and CSS of a dozen or more solutions and cannot understand how to make it do this because it's not my code, its Enjin's, and I have to work around it.
There are 2 pages in question, one is a standard format page so anything done to it can be done to all pages except the custom one and there will be no problems, and the other is a custom coded page using their HTML module. The key is the same solution is necessary for both but they have different code.
Custom Page: X |
Standard Page: X
Simply put I'm asking for a solution here. I tried the flex solution, height 100% with block display, javascript to find the distance between the bottom of the bottom div and the bottom of the monitor and adjust height accordingly, and more. Nothing seems to work. Any help is very gratefully appreciated.
I can provide any more details necessary, just ask.
What you are trying to accomplish is 2 things. First you want to make the div #memberContainer always be at least as tall as the users screen minus the height of your footer.
This can be acomplished with css using the "vh" unit. The vh unit is defined like this:
Relative to 1% of the height of the viewport*
And the calc function, as you will need to subtract 100vh (the screen height) from the height of your footer (180px).
So you need to add this code to your #memberContainer.
#memberContainer{min-height: calc(100vh - 180px)}
The second thing you need to do is make sure the background image of #memberBlock always covers the entire visible portion of the screen.
The image itself is 1920*1080, which is a standard 16:9 resolution. Assuming you only wanted to target 16:9 screens this would work fine. However to cover mobile phones and all other screens I would recommend you use:
#memberBlock{background-size:cover}
This makes sure the image will always cover the screen.
You can't have no gap and no content to fill it. There will have to be a gap somewhere.. Your gap is appearing in the middle because the footer is absolutely positioned. If you stop positioning your footer absolutely, the footer will cling to the body-wrap, however, you will still have a gap at the bottom, it just won't look as bad.
.myfooter {
display: none;
width: 100%;
position: relative;
background-color: RGB(20, 20, 20);
height: 180px;
bottom: 0;
}
If you really wanted to make it fit the screen, you could give a min-height with a calc of 100vh-FooterHeight
position: absolute;
height: 100%;
There may be other issues with this as i have no idea how mobile or responsive stuff would work for your site specifically but this is one way. You are coupling the BG div to the content div - that is why you are seeing that behavior - you need to make the BG a sibling div of content instead of a parent child relationship then you can have more flexibility on how it works - but for now my option seems to work
On my site I have the Problem that when I´m coming from the Imprint or How-to-find-us Site and I click on service or contact, the scrollTop doesn´t work correktly.
http://wicker-schuetz.de/en/
thanks
It's doing that because when you get to that point on the page, there's no more room for the page to scroll up any further; because your footer is kind of stuck to the bottom of the page.
You need to add some padding to the bottom of your footer to allow some extra space for your page to scroll up. You can do that by either adding a line to your css:
#footer { padding-bottom: 40%; }
or by adding a line to your javascript file:
document.getElementById("footer").style.paddingBottom="40%";
Either one should work, but If you want to dynamically adjust the padding on the bottom of the footer, so that the padding is just right, based upon the screen size, you might want to take a look at javascript's window onresize event and adjust the padding accordingly. Or you could probably just use CSS3 media queries.
I would like to add a footer to a page, but I don't want the footer to overlap the text if the user makes the page too small. How do I prevent this from happening without making a large table or a bunch of returns? The footer code is located in an included page. Perhaps there might be a way to chose when scrolling turns on or a minimum from the top CSS attribute.
I thought I explained it well enough, here's some more explanation:
On the page with the footer, there's a tag include('footer.php').
In footer.php, there's a section of text aligned at the bottom, with something like,
<div style="position: fixed; bottom: 10px">Footer Text</div>
If the user makes the window too small, the text will overlap everything else. I'd rather it stay at the bottom and a scroll bar appear.
The problem is not clear, but you might be looking for a responsive layout. This allows you to use a different set of CSS rules when the viewport's dimensions fall below a certain "breakpoint".
The specific technique is known as media queries. You might use it to hide the footer when the viewport gets too short, as follows:
#media screen and (max-height:700px) {
footer { display: none; }
}
Probably you're looking for something like a sticky footer, then?
I'm relatively new to all of this and have been working on a page for the last week. I've found this site to be very useful so far but I can't seem to get my page to dynamically fit entirely on the browser window vertically. I want it to shrink the elements so that it all fits in the browser without a vertical scroll bar. The reason for this is simple, it will be a landing page that is mobile app inspired, press the button and it will take you to where you need to go. However, users will have different screen sizes/resolutions, so the page must be fluid.
I have managed to get the page to shrink according to the width of the browser, as demonstrated here (jsFiddle Demo).
container {
padding: 1% 1%;
width: 80%;
height: 100%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
/*min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
As you can see, all elements shrink dynamically based on the width of the browser. However, when viewed on a 1024x768 screen, the bottom row of "buttons" is half cut off by the browser and the user has to scroll to see the rest.
I have tried a few solutions on this site but cannot seem to get it to work. Can anybody here help me to get it to adjust dynamically to the browser's width AND height?
To better illustrate what I would like, this is the effect I would like to see dynamic resizing example
Here is an image that shows exactly what my problem is Difference in Resolution http://img404.imageshack.us/img404/5840/resolutionissue.jpg
Note that the spacing between the buttons shrinks due to the percentage spacing but the images will shrink to fit if the window is adjusted horizontally only. I need it to squeeze the whole thing into the browser window.
To ensure that your container and child elements (where required) fill the screen vertically you need to ensure that you are also applying a 100% height value to the overall parents of these elements. In your case I would apply the following rule to your css:
html,body
{
height: 100%;
padding: 0px;
margin: 0px;
}
This would then cause your container to adapt to 100% of height of the browser window (as container is the child of your overall body which is a child of the html tag). However, as you have applied padding you will still see the vertical scroll bar. You therefore need to ensure that you reduce the height % of your container element in relation to the padding / margins that you apply. In your case as Kai Qing suggests above you should change your container height to 98%.
On many sites now, say you have a toolbar/table-header that is midway in the page.
Once you start scrolling, you can't see the header or toolbar anymore so you can't perform actions on any rows you may have selected, or you can't see the name's of the headers of the columns.
Many sites do this now, which is great, when you start to scroll the toolbar/header is fixed at the top of the browser. This doesn't happend right away, only when you scroll down to the point where the header/toolbar would normally not be visible.
How can I do this? Is there a name for this functionality?
Gmail has this, if you scroll down when reading an email, the toolbar at the top is fixed at the top so you can label/move/spam the email.
Take a look at jQuery Waypoints - Sticky elements, should be what you're looking for.
Use this css:
.static{
position:fixed;
}
And then, put a class="static" to your header element.
Hope this helps. Cheers
You don't need Javascript to solve this problem — don't make it harder on yourself. Using fixed positioning forces the header to "hover" above your content, and when you scroll, remain at the top of your screen, not at the top of the page. You can use this CSS to make your header fixed.
.header {
position: fixed;
}
Make sure you assign the class "header" to your div. For design reasons, I'd suggest keeping your header at the very top of the screen and stretching all the way across. You can use this CSS to do so.
.header {
top: 0px;
left: 0px;
width: 100%;
}
Technically, you don't need to specify "top" or "left" positioning, but it ensures you don't have anything to go wrong if you do decide to change something like that later. You can take a look at other types of positioning at this site.