Question 322400 in Html Question posted in
Some basic documentation can be found here.

Html – how to get vertical header aligned left of the screen having footer just below the header of same size and remaning section to right of both

I tried to achieved the following layout for larger screen.

enter image description here

Applied multiple options but can’t get the result. I am using the flex property for alignment purpose. header and footer position is fixed and left aligned(width 35%) .The screen should be responsive means when we resize or shrink the screen the layout will be

enter image description here

Note for this layout (shrink screen) footer will be appear on end of the page (content section is scrollable) means here header and footer is not fixed

how can i achieve above mentioned scenario?
the html structure is below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    
</head>
<body>
    <div class="wrapper">
        <header>
            <!-- Your header content -->
        </header>
        <section>
            <!-- Your section content -->
        </section>
        <footer>
            <!-- Your footer content -->
        </footer>
    </div>
    <script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
</body>
</html>

I want to work with Flex Property

Tags:

3

Answers


  1. 0 
    section {
  display: flex;
  flex-flow: column;
  height: 300px;
}

header {
  background: tomato;
  /* no flex rules, it will grow */
}

div {
  flex: 1;  /* 1 and it will fill whole space left if no flex value are set to other children*/
  background: gold;
  overflow: auto;
}

footer {
  background: lightgreen;
  min-height: 60px;  /* min-height has its purpose :) , unless you meant height*/
}
    <section>
  <header>
    header: sized to content
    <br/>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>
    Login or Signup to reply.
  2. 0

    This is maybe a bit crude but it’s probably the direction I’d go in.

    body {
    display: flex;
}

header {
    background: green;
}

footer {
    background: green;
}

/* Desktop */
@media only screen and (min-device-width: 601px) {

section.mobile {
    display: none;
}

body {
    flex-direction: row;
}

.headerFooter {
    width: 35%;
}

.desktop {
    width: 65%;
    background: red;
    height: 100%;
}

header {
    position: fixed;
}

footer {
    position: fixed;
    bottom: 0;
}

}

/* Mobile */
@media only screen and (max-device-width: 600px) {

body {
    flex-direction: column;
}

.mobile {
    position: relative;
    background: red;
    top: 5rem; /* adjust for header height */
    overflow: scroll;
}

section.desktop {
    display: none;
}

footer {
    position: absolute;
    bottom: 0;
}

}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="untitled.css">
    <title>Your Page Title</title>
    
</head>
<body>
    <div class="headerFooter">
        <header>
            <!-- Your header content -->header
        </header>
       <section class="mobile">
            <!-- Your section content -->mobile section
        </section>
        <footer>
            <!-- Your footer content -->footer
        </footer>
     </div>
        
     <section class="desktop">
            desktop section
    </section>
   
   
    <script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
</body>
</html>
    Login or Signup to reply.
  3. 0

    I believe a better approach would be using grid, but as you used flex am explaining with flex approach.

    I would approach like this: create a parent flex layout which will have three divs:

    1. Div 1 will be your header and footer
    2. The other div will be your section
    3. Have one mobile header div which is only visible in mobile and other header is hidden

    And div1 will also be a flex layout

    This way gives you very good flexibility even if you want to create a collapsible sidebar.

    .wrapper{
  width: 100vw;
  height: 100vh;
  background: gray;
  display: flex;
  font-size: 40px
}

.left {
  width: 300px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center
}

section{
  display: flex;
  flex-grow: 1;
  background: green;
  text-align: center
}

.mheader{
  display: none
}

@media (max-width: 1200px){
  .wrapper{
    flex-direction: column
    
  }
  .left{
    width: 100%;
    order: 3
  }
  .mheader{
    display: block
  }
  header{
    display: none
  }
  section{
    order: 2;
    height: 80%
  }
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" con`enter code here`tent="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
</head>
<body>
    <div class="wrapper">
        <div class="mheader">
           Mobile header
        </div>
        <div class="left">
            <header>
                <!-- Your header content -->
              Header
            </header>
            <footer>
               <!-- Your footer content -->
               Footer
            </footer>
       </div>
        <section>
            Section
        </section>
        
    </div>
    <script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search