I’ve been studying html and css in the past few months as a hobby. I’m still pretty much a noob so I currently don’t have the basic skills to reverse-engineer my problems. I think the solution to my problem should be rather easy, I have however not been able to fix. I have googled for multiple hours over the past days, changed a lot but have not found a elegant solution.
I do have a background in engineering and mathematics and are quite familiar with building engineering models in python but i have however failed to grasp the logic behind css and the use of multiple flexboxes.
Okay, here’s my problem. I hope someone here is willing to help me out.
I’m designing a simple website, it has very little content so I would like to design it in such a way that all content is displayed in the available screen of the user, I would like the nav bar to be always to have the same height as the webpage. However I am struggling to keep the navbar that size.
I’m looking for the four divs that contain both an image and a word to take up 25% of the height of the webpage and that the with of the bar is calculated using flexboxes as a result of the images to be square.
There are some questions that need to be answered before a full solution can be obtained and a bit of thought given in to what will happen when the content doesn’t fit into the set fixed heights that you have specified.
For example if the body has a height of 100vh then anything below the fold is in fact overflowing the body.
You have to be very careful with fixed heights because if content no longer fits then it overflows and takes no part in the flow of the document. If you have a fixed height then you also need to control the overflow and create a means to access the overflowing content (overflow:auto).
That sounds as though you never want content to go below the fold? That is unrealistic as content always goes below the fold (bottom of the viewport) as screens are seldom tall enough to hold all the content not forgetting that some people may be on mobiles or tablets.
You could fix the left and right columns to the viewport height and let the middle content scroll but once again you will have to manage the content on the left and right columns very carefully. What you seem to be asking is like some sort of ‘dashboard’ layout which generally is not a good idea for a normal website as content will vary considerably.
I’ve also created a codepen using sticky columns at the side to show the effect and given the middle column loads of extra content to cause the scroll so that you can see the effect. You should contrast this with the other demos above that other members have kindly supplied and try putting in more content in the middle column to see the difference in behaviour.
(Click ‘Edit on Codepen’ to see full page view)
These codepens are really only a starting point for discussion as there are a number of issues with parts of your code
Thank you all very much for your time in explaining this to me. Your replies will keep me busy for a couple of hours
My general idea was to first design a web page for a ‘normal’ screen and later change it so also tablets and mobile phones fit my design. If there’s something I’ve learned from engineering it’s to always take baby steps when you are learning new things.
What i actually would like is that the navbar consists of 4 container, each taking up 25% of the space by height and that is width of the image is calculated as a 1:1 ratio from the image height. This image with is the width driving constraint to calculate the width of the navbar. The 4 containers should each consists of 2 elements, a image and a piece of text.
If I get that working i want the images to reduce in size when I change the height of my window, up untill a certain point where the image size falls below a certain treshold and will be removed.
