Hi i’ve created webpage and the layout is good except the only way it will fill the page is if I add data inside. What is the best way to make the how thing fit the page So the footer is at the bottom and every looks correct.
I tried to make make container div class=“page” height: 100vh but that took it over the page and it created a scroll.
Any help would be much appreciated
You really don’t want to dictate the height of an element. Let the content that goes in there do it for you. It needs to be flexible. Is there a special reason why you want the content to fill the page? Columns are quite often of different heights.
It is usual to have the page be just as long (high) as it needs to be to accommodate the content.
Constraining it to full screen height is a bad idea, because on a narrower screen, the content may not fit. So if you are to do this, it should be a min-height.
It is possible with flex.
I working on an example.
Take a look at this. I have adapted your code to make a responsive page that does not use media queries. The page height will be at least the full height of the screen. Smaller screens that cannot accommodate all the content on the screen will scroll. This is all done with the awesome power of flex.
It may need further polishing, but it’s a good start.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Responsive Page</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
html{
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
*, *:before, *:after{
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
body {
line-height: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: space-between;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.page{
height: 100%;
overflow: hidden;
margin: 36px auto;
width:90%;
background:lightgray;
display: flex;
justify-content: space-between;
flex-direction: column;
flex: 1;
}
.cols {
flex: 1;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
h2{ font: 600 24px "Futura";}
p{ font: "Arial", "Helvetica", sans-serif;}
header{
margin: 5px;
border: thin solid;
padding: 5px;
}
h1{
font: italic small-caps 600 36px / 1.5em "Futura";
text-align: center;
}
main{
margin: 5px;
border: thin solid;
padding: 5px;
flex: 3 60%;
}
.side {
min-width: 10em;
margin: 5px;
border: thin solid;
padding:5px;
flex: 1 15%;
}
nav, main, aside {
display: inline-block;
}
footer{
bottom: 0;
clear:both;
margin: 5px;
border: thin solid;
padding: 5px;
}
</style>
</head>
<body>
<header>
<h1 id="title">Page Header</h1>
</header>
<div class="page">
<div class="cols">
<nav class="side">
<h2>Left Column</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<main>
<h2>Center Column</h2>
<p>In this article, I’d like to reacquaint you with the humble workhorse of communication that is the paragraph. Paragraphs are everywhere. In fact, at the high risk of stating the obvious, you are reading one now. Despite their ubiquity, we frequently neglect their presentation. This is a mistake. Here, we’ll refer to some time-honored typesetting conventions, with an emphasis on readability, and offer guidance on adapting them effectively for devices and screens. We’ll see that the ability to embed fonts with @font-face is not by itself a solution to all of our typographic challenges.
A Web Of Words Link
In 1992, Tim Berners-Lee circulated a document titled “HTML Tags,” which outlined just 20 tags, many of which are now obsolete or have taken other forms. The first surviving tag to be defined in the document, after the crucial anchor tag, is the paragraph tag. It wasn’t until 1993 that a discussion emerged on the proposed image tag.
Bursting with imagery, motion, interaction and distraction though it is, today’s World Wide Web is still primarily a conduit for textual information. In HTML5, the focus on writing and authorship is more pronounced than ever. It’s evident in the very way that new elements such as article and aside are named. HTML5 asks us to treat the HTML document more as… well, a document.
</main>
<aside class="side">
<h2>Right Column</h2>
<p>fions one might expect to be posed by an earnest college professor.</p>
</aside>
</div>
<footer>
<h2>Page Footer</h2>
<p>This can be used for contact information.</p>
</footer>
</div>
</body>
</html>
Edit
Example on Codepen:-
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.