Trying to fit the screen in CSS

In a web application I am developing, I had a CSS design problem. I had a title bar on top and underneath I had the content. I needed to get the content to spread itself to fit the whole screen instead of squeezing itself to the top.
2 answers

Using flexboxes for this purpose is a good solution, however, further css must be implemented in order for the content to be responsive.
An alternative would be to use a wrapper containing both items, and giving it a "position:relative". Then using "position: absolute" in both of your divs (assuming you've got one for the bar on top and anotherone for the content). You would also need to restrict the heights of the top-bar component.

FOR EXAMPLE:

#wrapper{
position: relative;
}
#top-bar, #content{
position: absolute;
}
#top-bar{
height: 50px;
width: 100%;
}
#content{
width:100%;
}

Comments

If I give a fixed height to the top-bar, wouldn't it make it unresponsive? Especially in smaller screens?

Can Özgür Yilmaz - Mon, 11/20/2017 - 12:27 :::

According to my code it would not be responsive. My mistake!
However, if the height units are set in % (i.e. 5% of the screen), then that would make your top-bar dub responsive to the device's size.

Ana Vilata - Wed, 11/22/2017 - 17:33 :::

Firstly I made the root div fit the screen by giving it the attribute "height: 100vh;". I then used flexbox to make the root div show the items in a colum by adding "display: flex; flex-direction:column;". The last thing I added was "flex: 1;" to the content div which is equivalent to "flex: 1 1 0;" This means "flex-grow : 1; flex-shrink : 1; flex-basis : 0;". Grow and shrink make the div grow and shrink in same proportion as the window-size. Basis makes the div take up screen as per the screen size available. For example if there are 4 divs with this they will all take up 25% of the available space.