Vous êtes ici : Accueil du blogCSS, Responsive » How to build a « One-page layout »

How to build a « One-page layout »

Years ago, I published an article about how to make a single-page layout working on Internet Explorer 8+ with « CSS tables » (it’s here). Now that IE8/9 represent less than 1% of global users (Worldwide, June 2018), we can (finally) ignore these guys and focus on something more present-friendly.

So, here some simple ways to build a (responsive) one-page website, using CSS Flexbox & vh unit.
Working on modern browsers and IE10+.

  1. [#] One-page website with pages aligned horizontally & vertically
  2. [#] One-column website with pages aligned vertically
  3. [#] Dealing with Internet Explorer

One-page website with pages aligned horizontally & vertically

<body>

   <div class="page" id="page-1">
      <div class="content">
         <!-- Page 1 -->
      </div>
   </div>

   <div class="page" id="page-2">
      <div class="content">
         <!-- Page 2 -->
      </div>
   </div>

   <div class="page" id="page-3">
      <div class="content">
         <!-- Page 3 -->
      </div>
   </div>

</body>
.page {

   /* Page 100% height (*1) */
   min-height: 100vh;

   /* Horizontal & vertical centering (*2) */
   display: flex;
   justify-content: center;
   align-items: center;
}

.content {

   /* Extend content... (*3) */
   width: 100%;

   /* ... but not too much. (*4) */
   max-width: 770px; 

   /* Content background */
   background: #fff;
}
  1. Page height at least equal to viewport height: 100vh = 100% viewport height.
  2. Aligns flex item (here our page content) horizontally and vertically. Read more about Flexbox horizontal and vertical centering.
  3. Makes content grow to its maximum size. We could use flex-grow: 1 or flex-basis: 100% there, but width: 100% is the only solution that doesn’t need any fix in IE.
  4. Fluid but limited width.

Full page demo

One-column website with pages aligned vertically

<body>

   <div class="page" id="page-1">
      <div class="content">
         <!-- Page 1 -->
      </div>
   </div>

   <div class="page" id="page-2">
      <div class="content">
         <!-- Page 2 -->
      </div>
   </div>

   <div class="page" id="page-3">
      <div class="content">
         <!-- Page 3 -->
      </div>
   </div>

</body>
.page {

   /* Page 100% height */
   min-height: 100vh;

   /* Limit width and center page (*) */
   max-width: 770px;
   margin: 0 auto;

   /* Align content vertically */
   display: flex;
   align-items: center;

   /* Column background */
   background: #fff;
}

.content {

   /* Extend content width */
   width: 100%;
}

Pretty similar to the previous exemple, except we’re limiting and centering horizontally the page (*) rather than the content. This allows us to get that single-column layout we were looking for.

Full page demo

Dealing with Internet Explorer

Fixing min-height issue

In IE10 and IE11, flex items are ignoring parent’s height if it’s defined with min-height property (read more). Wrap your pages in a global container and apply the following instructions to fix that issue:

<div class="iefix">
   <div class="page" id="page-1">...</div>
   <div class="page" id="page-2">...</div>
   <div class="page" id="page-3">...</div>
</div>
.iefix {
   display:-ms-flexbox; /* IE10+ */
   -ms-flex-direction: column; /* IE10+ */
}

Fixing margin-auto issue

Only if you’re using the one-column layout. In IE10-11, flex items in a column direction (as we’ve just defined in the previous fix) don’t render properly the margin: 0 auto centering if no width has been fixed (read more). So, just add one to make these old guys happy (it won’t bothers our modern friends):

.iefix .page {
   width: 100%; /* IE10+ */
}

You’re now ready to build your own single-page website ! And you might like to add some smooth scrolling effect to your brand new layout </promo>.

Laisser un commentaire

Balises HTML autorisées dans la rédaction du message :
<strong> <a> <code> <q>

Les champs marqués d'une étoile sont obligatoires.

Current month ye@r day *