Attempting to design a layout with flexible elements for the header, main content, and footer

https://i.sstatic.net/PURno.png

I'm currently working on creating a layout that has specific boundaries for each section. The header and footer need to be centered vertically, while the content should extend to the bottom of the viewport. Please keep in mind that the thin lines in the layout are just visual indicators and should not be included in the actual code.

Here's my progress so far:

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: pink;
}

header, footer, .content{
  border: 1px solid black;
}

header, footer {
  flex: 0 0 92px;
}

.content{
  flex: 1;
}
<div class="wrapper">
  <header>Header</header>
  <div class="content">Content</div>
  <footer>Footer</footer>
</div>

htmlcssflexbox

Answer №1

Apply margin and width to the header, content, and footer elements and center them within the parent container

  • Introduced nested elements within the main containers for header, content, and footer.
  • Maintained the width of the header, content, and footer containers at 100% with a added bottom border.
  • Assigned a width to the inner divs and centered them within their respective parent containers.

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: pink;
  align-items: center;
}

header, footer, .content{
  margin: auto;
  border-bottom: 1px solid black;
  width:100%;
}

header .section,footer .section, .content .section{
  height:100%;
  width:80%;
  margin:auto;
  background-color:red
}

header, footer {
  flex: 0 0 92px;
}

.content{
  flex: 1;
}
<div class="wrapper">
  <header><div class="section">Header</div></header>
  <div class="content"><div class="section">Content</div></div>
  <footer><div class="section">Footer</div></footer>
</div>

Answer №2

To achieve vertical alignment within the header and footer, you can utilize the align-items property.

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin-left: 10%;
  margin-right: 10%;
  background-color: pink;
}

header, footer, .content{
  border: 1px solid black;
}

header, footer {
  flex: 0 0 92px;
  display: flex;
  align-items: center;
}

.content{
  flex: 1;
}
<div class="wrapper">
  <header>Header</header>
  <div class="content">Content</div>
  <footer>Footer</footer>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for transforming a menu into a dropdown menu

Is there a way to convert the current menu into a Dropdown menu? Currently, the menu is not collapsing and it keeps opening. Any suggestions on how to achieve this? Here is an example for reference: https://i.stack.imgur.com/2X8jT.png ar ...

phphtmlcssyii

Animated slide-out menu with icon using jQuery

I am in the process of creating a menu using CSS and jQuery that will display an icon for each menu item. When a user hovers over a menu item for 0.5 seconds, I want it to slide slowly to the left to show the name of the menu. This is similar to what you ...

jqueryhtmlcss

Tips to stop automatic scrolling when tapping on a tab

Currently, I am encountering an issue with the tabs in my project. Whenever I click on a tab, the page scrolls down and I can't seem to figure out why. Below is the snippet of my HTML code: <ul class="list"> <li class="tab1 active"> ...

javascriptjqueryhtml

Leveraging Jquery to add an element or text in front of the initial instance of a different element

Here is a sample of my xml code: <entry> <br> <abc></abc> <xyz></xyz> <example></example> <example></example> <example></example> </entry> <entry> <br> <abc>&l ...

javascriptjqueryhtml

Creating a custom dialog box using JavaScript

How can I create a customized dialog box in the center without displaying "the host name says..." using CSS? function myFunction() { alert("Record Save"); } Thank you in advance! ...

javascriptcss

Is there a way for me to increment the value of 'sessionStorage.fgattempt' whenever either 'fgMade()' or 'threeMade()' are called?

Currently, I am developing a basketball game stat tracker and need to update the field goal attempts every time I make a field goal or three-pointer. Additionally, I am looking for ways to optimize the javascript code provided. The main requirement is to ...

javascripthtmlcss

What is the best way to ensure that my text always aligns perfectly to the end of the line?

I've been struggling to create a column layout where the text perfectly aligns with the end of the line, but so far, I haven't had any success. Despite my efforts to find a solution online, I have come up empty-handed. What I'm aiming for i ...

htmlcssbootstrap-4less

Choose a Vue filter according to the variable selected

My Current Table Dilemma Creating a table from a 2D array in Vue2 has been successful for me, as I've managed to display all the values correctly. However, I am facing issues with formatting. The template code is structured like this: <table> ...

javascripthtmlvue.jsvuejs2

Is there a way to automatically input an array of elements into a form without having to do it manually

Is it possible to create a form using an array of items fetched from a database, and automatically populate the form with each of these elements? Currently, I'm facing difficulties as the form appears empty. What am I missing? Below is the code I ha ...

javascripthtmlreactjsforms

Updating user credits through the Model::factory() method is a common practice in my workflow

I need to update the UserCredits after a purchase. For example, if a user currently has 10 credits and purchases 10 more, I want to add the purchased credits to their existing total. The goal is to increment the current credit score with the new credits ...

phphtmlcsslaravel

Having trouble getting dynamic values to render properly in Ionic select? Find a solution in Ionic 4

Encountering an issue with Ionic 4 and ion-select. The problem arises when attempting to bind data, specifically when preselecting data. In this scenario, the ion-select element fails to render properly. <ion-item class="transparent"> ...

htmlangularionic-frameworkionic4

Organize your items vertically using jQuery Mobile's list feature

I am currently working on a mini chat application. The messages in the list are appearing side by side and I would like them to be displayed one below the other. Is there a way to adjust the CSS or add classes to achieve this? <div style="height:100% ...

jquerycssjquery-mobile

Creating an app using Ionic 1 that features scrollable tabs with the ability to handle overflow

My current code snippet is displayed below. On smaller mobile screens, all 7 tabs are not visible at once and instead appear in two rows which looks messy. I want to modify the display so that only 3 tabs are visible at a time and can be scrolled through. ...

javascripthtmlcssionic-framework

Dynamically linking a video URL to the <video> tag in real-time

How can I dynamically assign a video URL to the <video> tag so that the video will display in the player immediately? This is my current code: <script> jQuery( '#the-video' ).children( 'source' ).attr( 'src', &apo ...

htmljqueryjquery-pluginshtml5-video

After refreshing the page, users are redirected back to the login page

On my website, I created a main page and an index.html page that redirects to the main page through a login panel. The issue I am encountering is that when I log in successfully on the main page and then refresh the page, it takes me back to the login pag ...

javascriptjqueryhtmlcss

Integrating a feature for displaying No Results Found

I am struggling to modify a script for auto-completing search fields. My goal is to include a "No Results Found" option along with a hyperlink when no matching results are found. I'm having difficulty figuring out how to add an else statement to displ ...

javascriptjqueryhtml

Struggling to Fetch Data from REST API with ng-repeat in Angular JS

After making a REST call from Angular JS and receiving a response from the API, I am looking to display messages on the front end using ng-repeat in my controller. $http({ url: "http://localhost:8080/services/AddConfig", method: "POS ...

htmlangularjsspring

Navigate through each element with a specific class name in a block of HTML code using

Currently, I am dealing with an HTML string that is being retrieved through AJAX. Let's assume it looks like this: var htmlString = '<div class="post"></div><div class="post"></div>'; I want to find a way to iterat ...

javascriptjqueryhtmlajax

Columns in Bootstrap compressed

Seeking advice regarding setting up a recruitment portal for my employer. Having trouble with the bootstrap scaffolding - columns appear squashed on smaller devices despite using xs columns. Looking for guidance to make it more responsive. Would greatly a ...

htmlcsstwitter-bootstrap

What is the most effective way to programmatically select checkboxes based on array values in

Trying to keep it concise :) Working on a project that generates multiple pages of thumbnail images with checkboxes. The total thumbnails vary and are sorted into 1000 item html pages, called by a parent html page via iframe. Goal is for users to check che ...

javascripthtmlarrayscheckbox