All geek questions in one place

Materialize the properties of flexible CSS frames without using

When I apply the css properties shown for the sticky footers for Materialize here , the height of my main element is increased to 33000 pixels. The footer is displayed fine, but above it is empty (presumably a length of about 33,000 pixels). Elements are positioned correctly with a header, then with a header, then with footers.

HTML:

<body>
    <header>
      Header stuff
    </header>
    <main>
      Main stuff
    </main>
    <footer>
      Footer stuff
    </footer>
</body>

bicker:

body
  display: flex
  min-height: 100vh
  flex-direction: column

main
  flex: 1 1 auto
+4
source share
3 answers

I was able to fix this by applying the parent flex css to the div wrapper instead of the body element, for example:

HTML:

<body>
  <div class="page-flexbox-wrapper">
    <header>
      Header stuff
    </header>
    <main>
      Main stuff
    </main>
    <footer>
      Footer stuff
    </footer>
  </div>
</body>

bicker:

.page-flexbox-wrapper
  display: flex
  min-height: 100vh
  flex-direction: column

main
  flex: 1 1 auto
+16
source

I had the same problem, other published solutions did not work for me, however this happened.

Meteor (1.1.10), fourseven: scss (3.4.1), poetic: materialize-scss (1.97.3_2), kadira: flow-router (2.10.0), kadira: blaze-layout (2.3.0)

materialize.scss

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.site-content {
  flex: 1;
}

-layout.html

<template name="masterLayout">
<div class="site">
    <header>
      {{> Template.dynamic template=navigation}}
    </header>
    <main class="site-content">
      {{> Template.dynamic template=main}}
    </main>
    <footer class="page-footer">
      {{> Template.dynamic template=footer}}
    </footer>
  </div>
</template>

routes.js

FlowRouter.route('/', {
  name: 'home',
  action: function(params, queryParams) {
    BlazeLayout.render('masterLayout', {
      toolbar: 'toolbar',
      main: 'blog',
      navigation: 'navigation',
      footer: 'footer'
    });
  }
});
+1

If you look at the source of the example page, you will see how they do it: http://materializecss.com/footer.html

The structure below works fine for me:

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
0
source

Source: https://habr.com/ru/post/1598708/

More articles:


All Articles