I am currently making a single page scrolling vertical site which has the viewport locked at 100% height.
The problem I have is that the designs that were given to me were calculated for a 1200x800 (macbook 13") view but I am using 1920x1080 (macmini) resolution.
Furthermore, the usable height area in each screen is limited by each widget that the browser uses so the 800 might actually be for example 638 height (it is more profound in the ipads where 768 browser height in total is not 768 at all). Also, the design must be centered in width and height. For width, I can use margin:0 auto, but height is trickier because it would need to make a div absolute.
What I did so far was to make a div absolute and have it manipulated by javascript, but I would like to know if there is a pure css way to do it since javascript would require much cases and excess code.
this is what i'm using with body height and html height at 100%
<div style=" display:table;width:100%;height:100%">
<div style="display:table-cell;vertical-align:middle;">
</div>
</div>
Related
I want a section of my site (banner) to be an image that fit all width and for the image to maintain the full width (not the px width, but in percentage) at all times. I don't care about the height being too low, I need the image to always show all the width content and the height to be auto.
I'm using background-size: contain and this keeps the full width of the image but the height needs to be calculated, because then the container height will be higher than the image's. I've tried using viewport units but it's not consistent between different resolutions (maybe I'm doing it wrong but the value for a higher resolution doesn't work for a lower one).
How would I make this responsive?
The markup:
<body>
<section class="feat-bottom">
<h4>some title</h4>
</section>
</body>
I'm using CSS for this image because, as we all (should) know, design images don't belong in the markup. So the image has to fit all the width, what would be the difference between 100% and 100vw? The first one is the parent's width, body has all the width in the screen and the second is the (again?) the device's width?
Will this approach be compatible with tablets and phones? Should I use a second image optimized for these cases?
To calculate the height of the element I'm using a formula that calculates the height while maintaining the aspect ratio:
New height = New width / (Original width / Original height)
So translating this into css gives:
section.feat-bottom {
height: calc(100vw / (1920px / 800px))
}
This approach offers a fluid scaling, so no break points needed.
I want a page with a fixed pixel size to always have the same percantage hight. I cant just use % or any other relative units since I already made the whole site in pixels.
Means when I have a div with a hight of 1500px and view it on a 1366x768 screen the whole 1500px div should still be visable completely.
The effect I want to accomplish is something similar to a browser zoom.
You could try min-height: 1500px; on the div, then put overflow-y: auto on the body or html elements.
If you want something to dynamically resize depending on the window height you'll want to look into either CSS flexbox, using the vh sizing, or using javascript to detect window resizing.
You could use the viewport meta tag for that. Just remove the "initial-scale=1" part and the page should always be rendered to fit the screen.
You should note that this might result in the page being shown very small which can lead to problems when people want to access it with a smartphone for example. If you want to optimize your page for different devices and screens, I suggest you make yourself familiar with responsive webdesign.
Something like height: 100vh; would make the object's height 100 percent of the viewport height. It seems like there is no way around switching from px to something else.
I'm trying to make a horizontal layout (with columns) where the content scales based on the browser window height.
I came across answers about perfect ratio based on width, but I want to have an infinite width (as the amount of content won't always be the same).
Is this possible just using HTML/CSS?
It is going to be hard to maintain the aspect ratio with css, but if you set the height of the maincontent box to 90% and the height of the containers to 100%. They should respond to
the browser window. But only in height, never in width.
From there you can use javascript to set the with to be <height> * 1.5 (or similar) you will have to do this in the document ready event, but also in the window resize event.
Is it possible to set width in CSS in percents of height? Like on picture:
No, you can't do this with CSS.
You can not set height like that in css.
There is little use even if You can, because different users have different preferences about using toolbar which occupy height on monitor, some even have multiple lines of bookmarks, some view Web in full screen - therefore there is no point of setting page layout according to browser height.
Only good recommendation is setting width to 1000px because most current day monitor resolutions can display that without horizontal scroll.
I am new to Div based Page Layouts. My questions is should we design div based page layouts using percentage or fixed pixel?
If percentage, what about cross browser compatibility?
If fixed pixels, what about different screen resolution? What screen resolution should we opt for?
Also, what should be the bases for our decision?
Most div based page layouts use fixed pixel widths, not percentages.
Using percentages has its advantages in very few scenarios - if you have a page that you want to change width based on window/browser, you'd use this. But I honestly can't think of the last time I saw a site that did this.
Fixed pixel widths allows you to actually design what your site will look like regardless of browser, screen resolution...etc.
When creating a layout with fixed widths, usually you create a "container" div that is around 960px wide (see http://960.gs/). This width is used because it fits most browsers/screen resolutions (eg - anything 1024x768 and above)
The "container" is usually centered on the page (though sometimes it's left aligned) - for examples, see msn.com, yahoo.com, stackoverflow.com ...etc. These are all fixed widths, not percentage (you can test this by changing the size of your window and seeing that their content does not change)