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+.
- [#] One-page website with pages aligned horizontally & vertically
- [#] One-column website with pages aligned vertically
- [#] 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;
}- Page height at least equal to viewport height:
100vh= 100% viewport height. - Aligns flex item (here our page content) horizontally and vertically. Read more about Flexbox horizontal and vertical centering.
- Makes content grow to its maximum size. We could use
flex-grow: 1orflex-basis: 100%there, butwidth: 100%is the only solution that doesn’t need any fix in IE. - Fluid but limited width.
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.
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