Flexbox vertical overflow issue

2018-06-27 01:23:02

I am trying to create a portfolio page for FreeCodeCamp using flexbox for the layout, but I'm having trouble with vertical overflow. The HTML:

<div class="flex-container flex-column top">
  <header class="flex-container">
    <h1 class="logo"><i class="fa fa-hashtag"></i>DubDev</h1>
    <nav>
      <ul>
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#projects">PORTFOLIO</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </nav>
  </header>
  <main class="flex-container">
    <a name="about"></a>
    <section class="about">
      <h2>About Me</h2>
    </section>
    <a name="project"></a>
    <section class="projects flex-container">
    <article class="card flex-container flex-column">
      <img src="http://fpoimg.com/300x250">
      <div class="card-title">
        <h2>Project 1</h2>
      </div>
    </article>
    <article class="card flex-container flex-column">
      <img src="http://fpoimg.com/300x250">
      <div class="card-title">
        <h2>Project 1</h2>
      </div>
    </article>
    <article class="card flex-container flex-column">
      <img src="http://fpoimg.com/300x250">
      <div class="card-title">
        <h2>Project 1</h2>
      </div>
    </article>
    <article class="card flex-container flex-column">
      <img src="http://fpoimg.com/300x250">
      <div class="card-title">
        <h2>Project 1</h2>
      </div>
    </article>
    <article class="card flex-container flex-column">
      <img src="http://fpoimg.com/300x250">
      <div class="card-title">
        <h2>Project 1</h2>
      </div>
    </article>
    <article class="card flex-container flex-column">
      <img src="http://fpoimg.com/300x250">
      <div class="card-title">
        <h2>Project 1</h2>
      </div>
    </article>
      <article class="card flex-container flex-column">
      <img src="http://fpoimg.com/300x250">
      <div class="card-title">
        <h2>Project 1</h2>
      </div>
    </article>
      <article class="card flex-container flex-column">
      <img src="http://fpoimg.com/300x250">
      <div class="card-title">
        <h2>Project 1</h2>
      </div>
    </article>
      <article class="card flex-container flex-column">
      <img src="http://fpoimg.com/300x250">
      <div class="card-title">
        <h2>Project 1</h2>
      </div>
    </article>
      <article class="card flex-container flex-column">
      <img src="http://fpoimg.com/300x250">
      <div class="card-title">
        <h2>Project 1</h2>
      </div>
    </article>
    </section>
    <a name="contact"></a>
    <section class="contact">
      <h2>Contact Me </h2>
    </section>
  </main>
  <footer class="flex-container">
    <p>&copy; 2016 Dubrick Development<p>
  </footer>
</div>

The CSS:

@import url(https://fonts.googleapis.com/css?family=Passion+One:400,700);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:700);

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

footer, header {
  font-family: "Passion One", sans-serif;
  font-weight: 400;
  background: #1abc9c;
  color: white;
  width: 100%;
  /* flex: 0 0 75px; */
}

footer, header > * {
  padding: 0 5px 0 5px;
}

footer {
  box-shadow:4px -4px 0 rgba(0,0,0,0.1);
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

header {
  box-shadow:4px 4px 0 rgba(0,0,0,0.1);
}

main {
  flex-wrap: wrap;
  overflow-y: auto;
  background-color: #909AA1;
  justify-content: center;
  position: relative;
  flex: 0 1 auto;
}

nav {
  flex: 1;
  align-self: center;
  text-align: right;
  padding-right: 20px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  font-size: 36px;
  padding: 10px;
  transition: background-color 0.5s ease;
}

nav ul li:hover {
  background-color: rgba(0,0,0,0.2);
}

nav ul li a {
  color: white;
  text-decoration: none;
}

.about {
  flex-basis: 1000px;
}

.card {
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  flex-basis: 300px;
  height: 300px;
  margin: 10px;
  align-items: center;
}

.card > img {
  flex-basis: 250px;
}

.card .card-title {
  background-color: white;
  flex: 1;
  align-self: stretch;
  text-align: center;
  font-family: "Droid Serif";
}

.flex-container {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.logo {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid white;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
  text-shadow:4px 4px 0 rgba(0,0,0,0.1);
}

.projects {
  flex: 0 1 1000px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #D8DBDE;
  max-height: 100%;
}

.contact {
  flex-basis: 1000px;
}

.top {
  height: 100%;
}

If I don't set height: 100%; on the top div, there is no overflow, but it doesn't seem to "flex"; that is, main does not fill the space between the header and footer with the header and footer remaining sticky. If I do set height: 100%; on the top div, as shown in the code, main fills the available space, but the flex-item children of section class="projects" now overflow. I'm very new to flexbox, so I'm probably doing something stupid here, but I can't figure out what it is.

Link to codepen

This should be the most apt-solution for you.

if you want your header's height to be relative then you will have to use jquery else you can just set a margin-top: 90px; to #content

new css required

.content{
  position: relative;
}
#top-1 {
    position: fixed;
    top: 0;
    width: 100%;
      z-index: 1000;
}
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    margin: 0;
}

small js required to adjust content's margin-top (jquery required)

$(document).ready(function() {
       $('#content').css('margin-top', $('#top-1').height() + 'px');
});

http://codepen.io/Rohithzr/pen/PNKmwb

链接地址: http://www.djcxy.com/p/75648.html

上一篇: 如何使Flexbox容器滚动？

下一篇: Flexbox垂直溢出问题