I am trying to create a layout that includes content and a footer using flexbox.
The goal is to have the content fill up any remaining space, while the footer remains a fixed height of 60px. What would be the most effective approach to achieve this?
<div class="container"> // 100% height
<div class="one"></div> // Fill remaining height
<div class="two"></div> // 60px in height
</div>
For reference, you can check out a basic example on this Jsfiddle link.
I want to express my gratitude for providing a foundation JSFiddle!
I made some customizations to make it suit your needs.
body {
margin: 0;
padding: 0;
}
The first step was removing the margins and padding from the body so that the .container could occupy the entire viewport.
.container {
min-height: 100vh;
}
Setting the minimum height of .container to be equal to the viewport ensures it fills the entire space available.
.one {
flex: 1;
}
This element, .one, is designed to fill the remaining space in the flexbox layout since .two has a fixed height of 60px.
It's worth noting, as Bram Vanroy mentions, that you can use the calc() function or other methods if the footer has a specific height. However, this approach also works even without explicitly defining the footer height, allowing it to adjust dynamically while still accommodating the content container.
Don't bother showing off. Use calc instead.
.wrapper {
height: 100%;
}
.section-one {
height: calc(100% - 60px);
}
.section-two {
height: 60px;
background: blue;
}
Check out this demo.
Consider using min-height, as suggested by Cu3PO42 in the comments.
To achieve this layout, you can use the following CSS:
.container {
height: 100%; /* Adjust to containig block */
display: flex; /* Initiate the magic */
flex-direction: column; /* Arrange in columns */
}
.one { flex: 1; } /* Expand dynamically */
.two { height: 60px; } /* Set to 60px tall */
However, there's a catch: for height: 100% to work properly, the containing block must have a specified height (otherwise, it leads to a circular reference):
The percentage is based on the height of the generated box's containing block. If the height of the containing block is not defined explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value becomes 'auto'.
Hence, you also require these styles:
html, body {
height: 100%;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.one {
flex: 1;
background: red;
}
.two {
height: 60px;
background: blue;
}<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>If you're looking to avoid dealing with calc(), vh, or a lot of height: 100%, an alternative solution is utilizing fixed positioning:
.one, .two {
position: fixed;
left: 0;
right: 0;
}
.one {
top: 0;
bottom: 60px;
background: red;
}
.two {
height: 60px;
bottom: 0;
background: blue;
}<div class="one"></div>
<div class="two"></div>This approach has the added benefit of being compatible with even very outdated browsers.
I am currently developing a user-friendly web application with intuitive multi-level options that loads new content without the need to refresh the entire page. This is how my structure looks: /index.php /schools.html /colleges.html Within schools.html, ...
Hey there, I'm trying to get rid of the extra space caused by using visibility:hidden. When I choose sort by date, the default content is displayed as expected. However, when I select sort by topic, it appears below the output for sort by date. I don& ...
Can someone explain why my image appears centered but not justified? I'm feeling confused about this. <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', flexGrow ...
Click here for the CSS code snippet Hello everyone, this is my very first query on Stack Overflow. I know it might be a simple question but it's my first time posting here so kindly bear with me. Below is the CSS code snippet provided: *{ ...
My navigation bar has a button that, when clicked, triggers a modal to appear at the top of the page. I am trying to center it horizontally. Here is the HTML code: </button> <!-- </button> --> <div class="text-dark "> < ...
I've searched extensively for the solution to my problem, but haven't found a satisfactory answer yet. My goal is to create a location finder with a map on the right and a list on the left. With over 18,000 locations to search through, the list ...
Looking to implement an image highlight effect when hovering over it? One approach is to reduce the opacity of the surrounding images while keeping the hovered image fully visible. If you've tried the code snippet below and encountered some issues, le ...
After tirelessly searching for answers all over the web, I've hit a dead end and now I turn to you for assistance. My current dilemma revolves around the lack of smoothness in my animations, whether it be through jQuery .animate or CSS3 transitions. ...
I've been experimenting with creating an information tag that slides out from behind a circular picture. To achieve this effect, I created a block and circle to serve as the information field placed behind the image. However, I'm facing a challe ...
Looking to create a column layout using flexbox with three divs that span the full width of their parent container while maintaining a single line height. If the content in the center div overflows, I want it to display an ellipsis at the end. Check out t ...
Currently, I am in the process of developing a website with a captivating full-page video background. The nav menu gracefully slides out from the left side using jQuery UI when users scroll down to view the site's content. To view the work-in-progres ...
Check out my jsFiddle example here: http://jsfiddle.net/pqCGd/. Within the jsFiddle, you will find a large messages div that contains multiple message divs. In this example, I have manually provided an example of a message div instead of using auto-genera ...
Having difficulty linking my css files to my ejs files. Using a standard node.js/express setup, I'm attempting to connect my main.css file from the public/css directory to my index.ejs file in views. The html and routing are functioning correctly. Ple ...
I am using bootstrap in reactjs and attempting to center a text in the middle of the screen, but it seems to not be working. Can someone please point out what I am doing wrong? <div className="h-100 d-flex align-self-center justify-content-center&q ...
I am facing an issue on our mobile website where the footer with fixed positioning overlaps with a scrolling feed underneath it, causing the links in the feed to be clickable from the footer area. Footer CSS: .footer { position: fixed; bottom: 0; right: ...
I am currently facing a dilemma with my nested flexbox setup. The primary objective is to create two responsive columns: .ColWrap, { width: 100%; box-sizing: border-box; background-color: #fff; padding: 50px 10px 50px 25px; display: fl ...
I have implemented a smooth scroll technique found here: https://css-tricks.com/snippets/jquery/smooth-scrolling/#comment-197181 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replac ...
My attempt at creating a loader animation was inspired by this design on dribbble: . After looking at the comments, I came across a CodePen with a similar animation, but it was all done in JavaScript: https://codepen.io/AbubakerSaeed/full/yLaQVdq tl2 .se ...
I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribut ...
I am looking to align the titles on the left side. I suspect that the issue lies in this particular line of code. Can someone help me identify which properties I should adjust to resolve this problem? https://i.sstatic.net/XWCsd.png Interestingly, the ic ...