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.
Taggings:
- Log in to post comments
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%;
}
Taggings:
- Log in to post comments
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.
Taggings:
- Log in to post comments
Comments
If I give a fixed height to the top-bar, wouldn't it make it unresponsive? Especially in smaller screens?
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.