I have seen this question, How can I make my flexbox layout take 100% vertical space?
My problem is different because I'm trying to create a page that has a header and footer that are in fixed positions. However, when making a div fixed I believe it is messing up the main div's ability to size itself correctly.
I have asked this question here: Getting the main part of my page to take up the remaining part of the screen, but I get told it is too similar to the question above and it has been deemed a duplicate.
I'm now posting this very stripped down version of the question to hopefully get a better response.
What am I doing wrong here? How do I get the header and footer to stay in place as the user scrolls, but also does not rest over the main div?
Here is a picture of what is happening:
As you can she the word Top is cut off as well as some text that the bottom. I have made the header and footer smaller than the width of the screen to show the problem.
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<html>
<body>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<main>
<h1>Top</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem, distinctio! Odio tempore dolor deleniti
alias reiciendis rem eveniet officiis quas dolores eaque iusto, voluptatum, vel similique fugiat, ab
adipisci nesciunt.
Officiis eveniet nulla, esse tenetur, voluptate dolores iste quis earum voluptas blanditiis cupiditate illum
sequi odio est maiores laudantium unde? Necessitatibus molestias, eius doloribus ducimus dicta numquam illum
sunt nisi.
Aut illum ipsum nihil asperiores, provident eius deleniti, amet totam consectetur nobis quisquam nulla! Illo
delectus nisi nulla alias ullam, molestias, illum sint neque esse cumque dignissimos porro tempore enim.
Magni culpa nisi voluptatem reprehenderit doloribus incidunt architecto dolores, odio sed accusantium
consequuntur necessitatibus ut consequatur rem quis a animi ducimus quod harum sequi eius. Rerum similique
impedit commodi aspernatur?
Sunt sint hic totam tempora dolore dolores voluptas neque obcaecati doloribus rerum asperiores ut
exercitationem autem nesciunt nostrum temporibus, dolorum aliquam, possimus, placeat dolor. Cupiditate, nemo
odit. Recusandae, iusto alias?
Sapiente, consequatur sint. Molestiae unde aperiam impedit ducimus tenetur, velit corporis facilis ex. Odit
obcaecati illum nam officiis minus nihil iure, explicabo dolorum sequi reiciendis, possimus, soluta quaerat
amet distinctio.
Fugiat a dolorem adipisci delectus, molestias, inventore molestiae quas, laboriosam maxime porro esse
aspernatur blanditiis itaque aperiam alias repellat voluptatem. Quaerat debitis porro natus quibusdam fugit
in quam tenetur sapiente!
Voluptatum, nam sunt aliquid, sint doloribus consequatur sed alias voluptatibus dolorum neque harum, quidem
iusto iure. Quas consequuntur autem molestias nisi, eveniet tenetur perferendis voluptatibus quibusdam,
reprehenderit ad, a dolore!
Velit voluptas quidem ab voluptate? Laudantium culpa doloribus, sint perspiciatis nobis architecto. Suscipit
perspiciatis, omnis voluptates quibusdam repellendus veniam ad asperiores eum qui? Repudiandae voluptatibus
adipisci sunt iure amet dolorem?
Est corrupti numquam, accusamus atque, reiciendis sunt error eum, repudiandae itaque veritatis blanditiis
culpa eaque corporis illum pariatur aspernatur porro repellat voluptate sit quisquam debitis quidem odit quo
eos? Quidem.
Repellendus, qui illo. Ipsam sit praesentium iste quaerat voluptates incidunt cumque veritatis atque fugiat
veniam, beatae animi nisi aperiam dolores maxime vitae molestias itaque, tempore voluptatem! Similique
labore natus beatae.
Maiores voluptate accusamus eligendi? Non, facilis voluptates aut placeat obcaecati aliquam at cupiditate
error adipisci quibusdam optio dolores commodi facere voluptatem ducimus voluptatibus molestiae maxime ut
consectetur, porro vel sed.
Perspiciatis, consequuntur! Dolor veniam fugit in earum ipsam provident reiciendis adipisci quidem!
Excepturi ipsa debitis, amet eaque suscipit quasi architecto neque? A itaque eaque distinctio tenetur
architecto sunt maxime optio?
Beatae, suscipit! Odio quis fuga deleniti iure sequi magni quas quasi ipsa autem perferendis mollitia,
reprehenderit excepturi sit eum laborum et nobis a ratione odit totam natus qui non asperiores.
Voluptatum veniam cum iure. Tenetur odit, quod earum repellendus vero facere sapiente. Id, tenetur neque
nemo magni sit ducimus labore fuga incidunt ipsam blanditiis esse officia eos consectetur magnam
perferendis.
Officiis, tenetur impedit? Enim voluptatum excepturi ex veritatis illum aliquam reprehenderit aspernatur
beatae, repellat pariatur vel illo culpa rerum numquam repellendus a vitae, aut aperiam facere nesciunt amet
ad tempore!
Rerum eius optio ipsam consectetur perspiciatis molestias alias! Hic voluptatibus sint molestiae explicabo
quidem, culpa incidunt eveniet atque quos molestias delectus, recusandae maxime cumque optio quam
perferendis sunt earum vero.
Reiciendis, animi. Illum rerum nemo assumenda, odit tempore molestiae voluptates eligendi sapiente deserunt
voluptatum alias at dolorem soluta quisquam repellat id quae cupiditate! Natus consequatur blanditiis illo
dicta ipsa exercitationem!
Quidem voluptatum deserunt dicta consectetur eum architecto dignissimos harum maxime beatae! Similique ut
ratione dolore debitis id rerum molestias illo reprehenderit nisi tempora. Id, quae consequatur corporis
explicabo est modi.
Temporibus porro mollitia sapiente non adipisci numquam a amet ad minus maxime deserunt, obcaecati itaque
voluptatum molestias repellendus totam nobis, quia aperiam inventore dolorem consectetur beatae natus quasi.
Quia, aperiam.</p>
<h2>Middle</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore dolor laborum voluptatibus suscipit facilis,
sequi, distinctio vero, fugiat magni nemo corrupti qui. Incidunt, maxime reiciendis. Illum iusto cupiditate
labore reiciendis.
Temporibus ratione corporis totam mollitia atque ea, fugiat dolores ad deserunt velit. Cumque modi labore
quisquam suscipit perspiciatis necessitatibus provident officia ipsam debitis, at nesciunt ullam nostrum
culpa perferendis similique.
A dignissimos ex error facilis, illum quibusdam voluptas illo. Eius assumenda iste repudiandae enim aut
delectus hic aliquam, ipsam magnam sequi sint perferendis sed tenetur, velit nihil fuga, nemo dolor?
Maiores rem facere voluptates quisquam. Aut sint, facilis inventore rem reprehenderit beatae eveniet
explicabo ipsum. Quo vitae perspiciatis vel iusto expedita! Ad vitae deleniti labore, impedit excepturi
explicabo magni hic!
Quos hic facilis voluptatem autem laboriosam! Perspiciatis distinctio beatae enim? Adipisci suscipit fuga
iusto facilis reprehenderit quod quam, officiis nemo illo. Magni enim corporis nobis adipisci ipsa minus
dolorum voluptates?
Ipsum facere vitae tenetur? Dolorem quis accusamus eius! Ab inventore, necessitatibus, laboriosam
voluptatibus id voluptas ea aliquam accusamus vero quasi quisquam. Asperiores dolorum molestias delectus
ipsum provident nemo et suscipit!
Deserunt itaque vitae facilis maiores, sunt quisquam debitis excepturi odio dolorum id fuga laudantium
corporis aliquid eveniet maxime sit aperiam cumque, exercitationem perspiciatis reprehenderit sint cum quam
error! Eveniet, animi?
Porro ad asperiores totam, corrupti temporibus delectus? Culpa architecto aperiam inventore nihil asperiores
consectetur delectus amet repudiandae modi consequatur eligendi quaerat sapiente, dicta itaque accusantium
quod impedit adipisci quos dignissimos.
Natus officiis vero in rerum ad aut molestiae provident esse, enim maiores reiciendis nobis tempora
laudantium sed facere veniam sapiente alias aperiam ipsa, obcaecati neque deleniti eveniet accusamus autem.
Eum!
Modi quod sequi omnis facere, asperiores similique ex reprehenderit cum maxime, veniam et! Deserunt itaque
cumque repellat! Perferendis nobis dolorum quod iure, dicta ratione aperiam eius, sit, accusantium quidem
quae.
Ut, atque in. Iusto, corporis? Vero cumque labore fuga vitae enim, similique beatae perferendis! Nobis
maxime minus itaque delectus consequatur? Repudiandae officiis quidem rem autem ratione voluptas placeat ea
dicta.
Earum at ipsa laudantium repudiandae nisi asperiores facere pariatur molestias. Qui, velit fugiat! Minus
odio atque facere omnis nesciunt rerum impedit assumenda modi! Modi quo, sunt mollitia quae corporis
similique?
Corrupti, obcaecati commodi odit fuga, aperiam et possimus sapiente dolor quod sunt ab dolorum voluptas
quibusdam dolorem amet eaque, ipsa maxime id perferendis sequi! Qui libero asperiores dolorem totam natus.
Vitae dolorum necessitatibus praesentium atque voluptas rem, accusantium veritatis suscipit dolore nostrum
odit rerum molestiae. Dolorem, doloremque, labore ipsam assumenda, blanditiis cumque repellat accusantium
hic minus non quisquam tempora magni!
Illum eaque, sapiente corporis quasi provident inventore. Alias, doloribus delectus nemo illum saepe totam
nostrum cupiditate excepturi, distinctio, hic odio quibusdam sequi similique assumenda aspernatur tempora
cumque ex. Tempore, velit?
Eius neque adipisci modi itaque dolore saepe fugit repellendus cum odit suscipit alias laudantium,
repudiandae enim esse reprehenderit ex officia a tempora. Quaerat adipisci, eius fugit ex atque ducimus
omnis.
Impedit optio, temporibus rem aut animi atque velit ratione quae? Quam debitis enim fugiat expedita nemo
error quae mollitia quod magnam asperiores commodi molestias nihil, aliquam tenetur maiores eum vero.
Optio laboriosam cumque magnam accusantium enim deleniti, delectus rerum esse aperiam a dolores amet quidem
modi ullam impedit voluptate nihil. Veniam laudantium ducimus blanditiis ipsam provident cum suscipit nam
quibusdam?
Cumque accusamus recusandae voluptatibus adipisci dolores eos eaque impedit, quibusdam itaque magni quam est
similique vitae animi obcaecati, cum maxime in soluta explicabo natus. Hic iusto ut nemo porro maxime.
Ipsam, odit et vel ipsum placeat eos sit ullam, in facilis corrupti, nemo reprehenderit fugit earum? Dolorum
magnam cupiditate facere at nemo, earum repudiandae corrupti distinctio deserunt. Reiciendis, doloribus
omnis?
Sunt vero, ea asperiores delectus odit quo laudantium assumenda voluptatum reiciendis earum, labore
temporibus enim ut aspernatur voluptatem porro ratione aperiam obcaecati voluptatibus ullam, magnam
consequuntur iusto quos dolore! Officiis?
Deleniti id consequatur facilis laboriosam placeat necessitatibus laudantium aliquam quidem deserunt non,
consectetur repellendus adipisci dolor aperiam aut praesentium voluptatibus corporis. Doloremque
consequuntur dicta sequi cupiditate nulla beatae eos deleniti!
Perspiciatis non id officia corrupti ex incidunt debitis consequuntur dolore amet esse! Nobis exercitationem
esse, ducimus omnis nulla cupiditate excepturi autem, voluptates maxime quam ad quia, laborum molestiae
minus libero!
Error, ipsum rerum. Est velit minus eveniet non quibusdam sapiente doloremque quae? Odio officiis cum
voluptate, assumenda hic tempore consequuntur! Qui placeat nulla quibusdam consectetur totam illo sit maxime
doloribus?
Labore iure illum, eos libero beatae nostrum architecto modi ex adipisci ipsam, facilis quis suscipit ullam
iste eveniet. Et beatae illo perferendis enim sed veritatis quaerat unde ullam dolores perspiciatis?
Mollitia recusandae minima quo consequatur fugit optio cupiditate impedit, delectus, ipsa iure dolore, nihil
ullam placeat. Modi accusantium laboriosam error quis nam eos, in impedit, maxime consequatur tenetur, quod
non.
Voluptatum ab quo incidunt, eligendi nesciunt ullam corporis quos optio corrupti, tempore odit, illum eaque
tempora! Natus repellat provident culpa odit. Doloremque rem assumenda provident omnis, quo eligendi
mollitia distinctio.
Possimus, asperiores earum, aliquid ut recusandae eaque mollitia nemo a dolores impedit sunt adipisci
facilis aliquam quis! Ut quam porro harum incidunt, eveniet sit non consequatur reprehenderit eligendi
accusamus nobis.
Qui harum voluptas ipsum distinctio culpa, ipsam nulla accusamus quis libero magni ab dolorem quos cum quo
consequatur reprehenderit vitae pariatur dignissimos voluptatibus alias facilis quam optio cumque quasi.
Fugit.
Ipsa atque ex error, eos dolore aliquam officiis tempora? Laborum delectus aliquid iusto nulla similique,
alias labore. Minima eligendi qui voluptas quibusdam fugit itaque! Magnam consequatur nam quae at nisi!
Repellendus, quas libero praesentium nemo corrupti eveniet officiis quaerat omnis vero aperiam alias
voluptate. Odio tempora quidem vel at minus, quibusdam numquam alias illo ipsam qui aliquid odit nostrum
sequi!
Perspiciatis eligendi accusamus, quaerat adipisci doloremque ipsam consectetur accusantium facere repellat
ratione repudiandae facilis voluptatem. Dolorem esse ipsum, atque sapiente molestiae soluta nemo excepturi
ea voluptas repellat, quos, sed totam!
Eaque vitae accusamus, accusantium, provident quos eius deleniti temporibus numquam incidunt error delectus
veniam veritatis, porro voluptatum ipsam molestiae libero? Sit quaerat a dolores dolorem molestiae sed dicta
ex quis!
Inventore earum blanditiis beatae voluptate aliquam iste culpa illo molestiae eum a molestias ratione autem
aperiam, qui eligendi labore dolores nam, natus saepe similique, dolor impedit voluptatum! Voluptas,
repudiandae adipisci!
Fugit quos, ullam tempora recusandae ab odit omnis enim sequi voluptates eaque hic exercitationem error quod
officiis vel quo perferendis corrupti, quis, magni atque eveniet explicabo id eum! Ratione, et?
Eum voluptate impedit perspiciatis veritatis, laudantium id ipsum alias similique aperiam temporibus porro
corrupti quas dignissimos quia consequatur voluptatem, consequuntur atque ab laborum repellat molestias
neque? Earum fuga iste nihil.
Et perferendis debitis nobis distinctio neque rem ad soluta itaque molestias quaerat veritatis tempora, ea
minima aspernatur ratione facilis a fugit assumenda reprehenderit illo dolorem! Sapiente dignissimos maxime
quis quam.
Accusamus laboriosam ratione possimus animi cumque corrupti repellat sapiente culpa velit est doloremque ea
suscipit a quasi corporis, eveniet officia veniam odit totam ab! Nulla rerum placeat temporibus esse
laborum!
Assumenda cupiditate fugiat culpa officia commodi, sequi maxime quibusdam minima asperiores, necessitatibus
quos qui corrupti quam. Excepturi, ducimus iste quis expedita corporis recusandae modi distinctio blanditiis
repudiandae in ratione! Dolore?
Enim quia facilis illum a harum vel nihil accusamus voluptatibus consectetur. Laudantium sint aperiam odio
asperiores deserunt explicabo? Ab, exercitationem fugit. Facere illo odit magnam temporibus itaque officia
accusantium nemo.
Repudiandae, tenetur vel. Repudiandae ad totam dolore optio dolorem ab, cupiditate quas eius impedit
tempora? Eligendi nostrum, nemo totam culpa quidem adipisci consequuntur quam omnis illo nesciunt quisquam
dolore corrupti?
Cupiditate accusamus perferendis exercitationem, molestiae eos quas sint optio enim architecto quo hic at
autem inventore sequi a sed laborum blanditiis voluptate nesciunt incidunt illo totam beatae! Doloremque,
nulla assumenda.
Eos modi ad nostrum totam, delectus minima, itaque earum amet necessitatibus tenetur sunt autem quod, ipsa
distinctio nesciunt aliquid. Excepturi laudantium vitae repellat. Beatae, facilis. Harum quam cupiditate rem
perspiciatis.
Accusantium odit, non dicta, beatae veniam eum quidem vero ex culpa sequi saepe autem at architecto
doloremque quo quam excepturi laudantium rem delectus impedit id voluptate ad facere ipsum. Libero!
Adipisci cumque non consequatur, voluptatum corporis ipsa enim omnis iure quos dolor, alias distinctio aut
repudiandae. Architecto ex, deleniti iusto modi labore dolorum, repellat cupiditate hic expedita rerum vitae
consectetur?
Nemo veritatis nobis perferendis eos error, commodi aut, reprehenderit velit inventore quidem blanditiis
impedit voluptas? Amet cumque architecto, id voluptates cupiditate ipsam natus ut, laborum quos adipisci
nulla, earum quod!
Quis iure similique velit facere facilis magni doloremque nesciunt at enim quia. Unde saepe accusantium
accusamus qui sequi quam quisquam magnam maiores aliquid illo iure praesentium blanditiis, explicabo, ipsam
dolores.
Ipsum atque odit itaque hic optio id harum vel excepturi quae ea laboriosam reprehenderit beatae error sed
asperiores dolor soluta, repellendus, labore similique ipsa suscipit rem dolore! Mollitia, saepe fugiat?
Sapiente quo ab sunt inventore vero incidunt modi deleniti harum nisi dolores, rem maxime, culpa dolorum
cupiditate molestias ipsa quod velit pariatur accusamus blanditiis! Reiciendis praesentium quo nemo odit
accusantium!
Dicta unde impedit, porro et repudiandae nobis minus. Vitae quae quasi porro aut dicta nihil tempora
mollitia id delectus quidem optio qui non, accusamus nam fugiat officiis. Pariatur, mollitia nesciunt.</p>
<h3>Bottom</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda quae neque commodi perspiciatis dolores
vero, nemo veniam necessitatibus reprehenderit quas aspernatur eius eum ea at repudiandae perferendis
molestias mollitia officia.
Sunt rerum veritatis fugit, quam earum id enim error itaque. Atque hic cumque adipisci ducimus expedita
asperiores minima officia totam repellat enim voluptatibus sequi dolorem qui quibusdam, voluptate culpa
reiciendis?
Similique, commodi deleniti. Soluta culpa consectetur molestiae fuga aspernatur reiciendis ratione minima,
iste natus sint, libero impedit omnis? Laborum quae quo nulla repudiandae obcaecati voluptas tempore, dicta
ullam. Suscipit, sint.
Nostrum explicabo, fuga possimus debitis voluptatem, accusantium cum officia, molestiae perspiciatis
architecto unde odit praesentium vitae odio similique ea? Accusantium aut facere qui eum eveniet deserunt
libero autem sequi facilis!
Sapiente quisquam explicabo vitae tempora architecto, voluptatum, consectetur, sit commodi rem similique at
dolore impedit beatae? Quae debitis sequi adipisci quis. Repellat quos voluptate deserunt vero voluptatum
minima explicabo quisquam.
In aliquam recusandae ipsa rerum perferendis debitis, labore voluptatibus accusamus neque? Optio soluta in
architecto corporis autem deserunt officia adipisci, consectetur cupiditate nemo ut accusamus quod odio
deleniti asperiores dignissimos!
Amet culpa error aperiam dolorem perspiciatis atque aliquid molestias! Corrupti id adipisci in esse?
Ratione, itaque quam tempora perferendis ullam architecto officiis expedita, natus magni rem tempore,
quisquam beatae quae.
Omnis rerum recusandae ex facere cum sed laudantium neque deserunt odit similique eius iste ratione est,
nisi quaerat soluta adipisci suscipit amet, dicta dolore ut nihil tempore! Necessitatibus, repudiandae
voluptate.
Nulla fugit impedit, rerum nemo maxime ullam molestiae sequi at ducimus ipsam deleniti natus, expedita
itaque ab facere dolore consequatur. Odio at nemo deserunt error corporis numquam ipsum eaque provident?
Blanditiis, incidunt illum sunt cumque tenetur hic ullam! Nobis praesentium quod odit assumenda quibusdam
aut debitis cupiditate? Nemo numquam culpa inventore adipisci deserunt perspiciatis, excepturi consequuntur,
quod quibusdam repellendus magni.
Laboriosam iure ipsum cumque quos dolorum temporibus minima perferendis maiores dignissimos dolor ea
laudantium obcaecati ab corrupti doloribus dicta, soluta illo atque in praesentium sit doloremque
accusantium molestiae explicabo. Excepturi.
Earum minima adipisci dolor hic, aperiam obcaecati cum optio numquam pariatur minus officiis quam doloribus,
culpa sunt eum eveniet non provident a neque deserunt alias? Mollitia inventore fugiat excepturi ipsam?
Temporibus, eaque voluptates, illo aliquam optio cum repellendus dolore, vero explicabo nihil obcaecati
doloremque ab cupiditate praesentium! Facilis incidunt, accusamus neque fugit aliquid at nisi quaerat minima
expedita, mollitia excepturi?
Nihil inventore repudiandae consectetur vitae! Debitis adipisci repudiandae nisi voluptates, a laudantium,
fugiat laborum vitae consequatur, libero hic eligendi quos temporibus! Cumque animi veritatis optio
repudiandae minima ut quidem quisquam?
Adipisci dolores ad in aliquam voluptatibus laboriosam sequi amet suscipit repudiandae rerum quos, eveniet
tempora hic cumque laudantium incidunt autem pariatur tempore fugiat quis sint nostrum quia quidem.
Laudantium, reprehenderit.
Voluptate voluptatibus incidunt obcaecati aperiam asperiores eaque voluptatum quos, harum repellendus,
dolorem et in sapiente. Fugit eos accusantium, quam esse ea aliquid. Nemo dolorem nam quaerat quibusdam
animi cumque consequuntur!
Nostrum, consequuntur molestias. Nulla, minus. Similique eos ipsa quod, nulla voluptatum eligendi hic
consectetur nihil illum aut facere at obcaecati perferendis ratione ipsum atque incidunt inventore
voluptatem officiis numquam? Nemo.
Deleniti, beatae! Ut, nobis fuga adipisci optio consequuntur eveniet aperiam, ullam ducimus ad modi, fugiat
quod. Nisi illum, ullam veniam minus molestias maxime nostrum fugit sit. Ipsum accusamus recusandae
mollitia!
Quis similique nemo sunt tenetur, harum eaque, magnam aspernatur aliquam quod sit error voluptatem amet nam
vel dignissimos id corrupti ipsam tempore unde minima natus ipsum soluta hic laborum. Vero.
Perferendis, dignissimos nesciunt voluptatum, veritatis maiores facilis atque debitis laudantium placeat a
accusantium, vero explicabo saepe ut nam qui magni quisquam accusamus itaque enim! Esse modi atque obcaecati
perferendis laboriosam.</p>
</main>
<div class="footer">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</body>
</html>
CSS:
:root{
--color-header-background: #0267C1;
--color-footer-background: #0075C4;
--color-link-background: #52DEE5;
--color-link-text: #EEE5E9;
--color-link-hover: #92DCE5;
}
html, body {
height: 100%;
margin: 0;
}
.header {
background-color: aqua;
}
.topnav {
position: fixed;
top:0;
width: 70%;
overflow: hidden;
background-color: var(--color-header-background);
}
.topnav a, .footer a {
float: left;
display: block;
color: var(--color-link-text);
text-align: center;
padding: 10px;
text-decoration: none;
}
.topnav a:hover, .footer a:hover {
background-color: var(--color-link-hover);
color: black;
}
.footer {
/* Made 80% to show all text is not shown */
width: 80%;
position: fixed;
bottom: 0;
background-color: var(--color-footer-background);
overflow: hidden;
text-align: center;
}
to
– Rene van der Lende Jun 28 '23 at 01:47Tags](https://www.w3schools.com/tags/tag_hn.asp)...