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%.
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.
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
I have searched a lot and couldn't find an exact solution for my problem.
basically i have a page, which can be loaded in any div. All the height and width inside the body is set relatively. When i load the page into a smaller div, i want it to have the 100% size of the current body (the body of the page i am loading into), and it should be loaded fully into the div without any cropping/autoadjusting, and it must be scrollable.
The only solution i came up with is hardcoding one single dimension inside the main page, but i do not want that, coz it should all be dependent upon the resolution of the screen and current zoom factor.
P.S i do not know what sample code i should give, nor what further details are required. please feel free to ask me for anything.
P.P.S i want to see if its possible to do without using js/jquery
Thanks.
If i understood correctly, you could use viewport units vw and vhto set the size of your page equal in relation with the current viewport regardless of the <div> into which it's loaded.
1vw = 1% of viewport width
1vh = 1% of viewport height
for e.g.:
body{
width: 100vw;
height:100vh;
}
Browser support of there units #caniuse.com
I am using jQuery Masonry to display a grid of boxes (all the same size).
Here is my testing site.
Works great when the browser width is 1100px or below.
When viewing it at 1270px and above, Masonry keeps adding columns on the right hand side.
I have a max-width set on the outer container, but Masonry doesn't seem to acknowledge it and just keeps expanding the width of the Masonry container.
On the Masonry Centered page, you can see that it is centered, but there is no constraining width. As you increase the browser width, it just keeps expanding and adding more columns.
How can I add a hard rule to say, "This is the maximum width. Stop trying to add more columns."
Thanks
UPDATE
Here is a jsfiddle, although I"m not sure if it's even set up correctly. It's best just to go to my testing site to see the problem.
Setting a max-width on the parent element of the masonry'ed container works for me. Is this not the result you're looking for?
#wrapper { max-width: 990px; }
HTML/Javascript - I want to load images dynamically, and the images I'm going to load can be of varying aspect ratios.
I want the images to fit into a specific area of the containing div - an area 40% of the containing div's width and 80% of its height. Since they have varying aspect ratios, of course they will not always use up this entire area, but I want to resize them such that they don't exceed the bounds. But I don't know ahead of time whether I should specify the width or the height (and the partner attribute to auto) since I don't know what the aspect ratio of the images will be ahead of time.
Is there a CSS way to do this? Or I need to compute the required widths using javascript?
PS I only need to do this in Firefox 3.5!
Your server can find out the dimensions of the images and send this information along when you request an image. Failing that, you will need to wait for the image to load before its dimensions will be available to javascript.
However, there is another way. Request the image, telling the server the dimensions of the space you have. It can then generate a suitable version of the image and cache this, before sending the image that is already exactly the right size down to the browser.
Update
One other way, that may be acceptable to you is to set the container div like so...
.mydiv { overflow: hidden; }
Then set the image to be fixed in height and auto for width. This will cause over-wide images to be clipped on the left and right of the image. If this is acceptable in your case, then this is a very simple solution.
My solution was to provide a container div that would bound the object to the needed size:
#img_container {
width: 48%;
height: 80%;
}
Then for the image, itself I assigned max-width and max-height which are recognized by firefox:
#img_container img {
max-width: 100%;
max-height: 100%;
display: block;
}
This way, the image auto-adjusts itself at most to the width of the container, but keeps the correct aspect ratio. Hooray!