In a project I am working on, I am trying to get the page's header height to be 5% of the screen. Obviously this is done with height: 5%;, however, I need the header to stay at 5% of the whole screen at ALL times. This means that if I were to shrink the browser window, the header div does NOT shrink proportionally as well. I need it to stay the same size, but the size needs to be set with the initial percentage. A website that I used for reference was github.com, as their header stays one size even when the browser window is shrunk. Flickr.com is another example of what I am looking for in a header. I have tried to use min-height: XXpx; (replacing the 'x' with numbers) but that was not effective.
Use JavaScript once the page has loaded to calculate the 5% of the window height & assign it to the header as its CSS height value. It will overwrite any set CSS values.
var h = window.innerHeight * 0.05;
getElementById('your-element-id').style.height = h+'px';
did you tryed vh(vertical height) calculation?
example
navbar{
min-height: 5vh;
max-height: xx;}
Related
I have an Angular Material table where I want the header and footer to be sticky and the content to scroll. To do this I simply need to put the table in a container, set the height to a certain amount of pixels, then set the overflow to auto. This works as intended. I just need something like this to work for multiple resolutions. If I set my div to 600px it looks great on my computer but someone else would see a double scroll bar.
As mentioned if I set the height to a fixed amount of pixels that works great (eg: height: 600px). I've tried using the calc function(eg: height: calc(100%-200px)) but that doesn't seem to work, the table just takes up all the room.
I have done a bunch of media queries at 10px intervals and set the fixed height in each one. This works but seems like a terrible solution.
I feel like there has to be a way to set a fixed container to have a height that is the screen height minus a certain amount of pixels (to account for the header and some white space at the bottom).
Use vh rather then %
height: calc(100vh-200px)
I have an iframe that I want to allow to be as wide as the display requires. I have it inside of a section, and have the following in a sass file:
iframe
max-width: 100%
where the real width, otherwise is controlled by the section. Now, on very narrow displays, like a smartphone, this works fine. However, the height of the iframe goes crazy in this case. Is there a way to ensure that the height of the object cannot get become larger than it's width? That is, is there a way to access what 100% width actually is? I wish I could do something like this
iframe
max-width: 100%
max-height: max-width
Edit:
Please see here for a working example:
http://jsfiddle.net/ptzyjmb1/5/
Notice how the first embedded object is wider than square. The second is about square. and the last is taller than square. I just want some option for max-height that will result in the third object (the "tall" video) to be square. That is, I want to be able to set the width to whatever I (or the display) would like, and the height will not be allowed to exceed that value.
I do not want to enforce that height = width, just that height <= width
Use the vh and vw attributes (view-height and view-width):
iframe {
max-width: 100vw;
max-height: 100vw;
}
If, as #Anonymous pointed out, the iframe is the child of some parent element that is not 100vw across, you can just use the div's width as the width of the iframe:
div {
width: 50%
}
div iframe {
max-width: 50vw;
max-height: 50vw;
If the width of the parent div is constantly changing, there is probably some JS being used. If the width of the parent element is represented in a variable, as it should be, then JQuery can sort out the problem, as follows:
setInterval(function() {$("div iframe").css("max-width",String(divwidth)+"vw");, 10)
I have a few divs on my code all of them positioned correctly how i want it. The only problem is that they do not re size when i shrink the page. I want to be able to re size them according to the web browsers size. I do not know exactly how to do it and im worried it might mess up their correct top & left position. All of my divs are currently set as absolute positioning.
Set their sizes to percent values rather than pixels (I asume that's what you're using)
Set all divs with percent values.
Or
You can use 'media rules' of css3:
#media screen and (max-width: 300px) {
.div-a {
background-color: lightblue;
}
}
You have basically 3 options
Bootstrap (http://getbootstrap.com/)
Use percent values instead of pixels
Use vh (view height) and vw (view width). Here's an example: http://jsfiddle.net/7m55nur1/
Note that width: 75vw; keeps the div width at 75% of the web browser. Same as margin-left: 12.5vw which keeps the margin on the left at 12.5% of the browser size.
I figured it out, basically what i did what get the width (lets say it's 300 pixels) and figure out the percent of the page width (in my case is 1900 pixels).
The result would be 15.789473684210526%
putting that exact value worked just fine! As accurate as a pixel.
I used this tool:
http://www.onlineconversion.com/percentcalc.htm
Thank you all for your replies!
I am creating a simple portfolio webpage for an photographer. He wants to show his pictures in the web. So the images should be responsive. So I wrote following code to the image class:
img {
max-width: 75%;
height: auto;
}
So it fits the image to the width of any screen, but I want to show the image in full height. So if the image has a bigger height, the user have to scroll down to see the whole image. So how should I set the height, so the whole image whould be shown immediately?
With regards,
Andrej
did you try reversing the same, as in, try giving it a height, and leave the width to auto..!!!
Because u just need to set either of the two, and the other adjusts accordingly...
Simple:
max-height: 100%; /* or a bit less */
But note what the docs say:
The <percentage> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.
Ok, I have found a solution.
I just set the max-height with the vh units (viewport height).
Thx for your help.
try this way: img{max-width:100%; max-height:100%;}
I am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.