具有固定页脚和导航的Bootstrap 4全屏页面:内容不填充也不溢出 [英] Bootstrap 4 full screen page with fix footer and nav: content doesn't fill and overflow
本文介绍了具有固定页脚和导航的Bootstrap 4全屏页面:内容不填充也不溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试构建一个带有导航栏和页脚的模板页面，在其中我可以在主div(容器-流体)中添加稍后的列，但是我遇到了两个问题.页脚是一个div，我用作日志记录空间.它固定在底部，并且每次在页面上执行操作时都会用日志填充它.内容可能会超过可用空间，并出现滚动条.导航栏是标准导航栏.当我尝试用随机数据或文本区域填充容器时，会出现问题.主div(和主体)大于主视图并使页脚溢出.我在做什么错了?
I'm trying to build a template page with a navbar and a footer where I might add later column inside the main div (container-fluid) but I get stuck with two issues. The footer is a div that I use as a logging space. It stays fixed at the bottom and I fill it with logs every time I do an action on the page. The content might grow bigger than the space available and scrollbar appears. The navbar is a standard navbar. The problem appears when I try to fill the container with random data or a textarea. The main div (and the body) are bigger than the main view and overflow the footer. What am I doing wrong?
这是jsfiddle:链接
Here is the jsfiddle: link
请注意，这两个部分都是彩色的，只是为了查看问题.浅青色的部分应填充到页脚上方的屏幕中，或者至少在其被击中时不再增长(您可以通过扩大文本区域进行测试).
Note that the two parts are colored just to see the issues. The lightcyan part should fill the screen above the footer or at least not grow once it hits it (you can test it by growing the textarea).
我的第一个想法是将html和body设置为100％的高度，忽略导航栏(不确定其高度)，使页脚保持其固定高度(需要这种方式才能将其用作记录器)并计算主div的高度.它不起作用.请注意，部分代码来自于bootstrap网站上的示例.
My first idea was to set html and body to 100% height, ignore navbar (not sure about its height) leave footer with its fixed height (needed this way to allow using it as a logger) and calculate the main div height. It doesn't work. Note that part of the code comes from examples taken from bootstrap's website.
<body>
<header>
<nav></nav>
</header>
<div class="container-fluid">textarea and columns here</div>
<footer>
<div class="content">connecting..</div>
</footer>
</body>
推荐答案
- 将身体的所有内容包装在一个可弯曲的容器中，其弯曲方向为列.
- 所有主容器的父母都必须有100％的身高.
- 在主容器上使用
.flex-grow-1，以便占用所有可用空间. - 隐藏主容器的溢出
- 滚动显示主容器的子级溢出.它必须是所有主要内容的父项.
- Wrap all the content of the body in a container that is flex, and its flex-direction is column.
- All the parents of main container need to have 100% height.
- Use
.flex-grow-1on the main container so that it takes all the available space. - Hide overflow of the main container
- Scroll overflow of the immidiate child of the main container. It must be the parent of all of the main content.
body,
html {
height: 100%;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column h-100">
<header class="container-fluid">
<div class="row">
<div class="col-12 p-5 bg-primary">
</div>
</div>
</header>
<main class="container-fluid flex-grow-1 overflow-hidden">
<div class="row h-100 overflow-auto">
<div class="col bg-danger">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis totam corporis alias qui repellendus optio consectetur nihil suscipit ipsa dolorem in ab, illo, hic placeat iste necessitatibus eum accusamus magni! Perspiciatis, itaque dolore, veritatis
et sequi obcaecati ipsum fuga deserunt laborum assumenda ducimus facilis pariatur explicabo? Ex veritatis placeat minus enim iure ea deserunt ut optio. Est odio a omnis! Veritatis laborum sit, ea laboriosam nihil laudantium numquam ab modi ipsam
doloribus obcaecati consectetur nam magnam non sequi illum vero facilis voluptatibus quibusdam unde sunt sapiente! Pariatur adipisci nostrum deserunt! Dolorem assumenda inventore nisi eligendi officia rerum nostrum ea voluptates esse atque deserunt
culpa ex nobis quod est, fugit molestias recusandae sint iusto ut rem cum itaque dolor magnam. Eligendi! Hic porro incidunt iure culpa necessitatibus repellendus inventore laboriosam expedita neque consectetur. Reprehenderit assumenda minima eum
laboriosam impedit, omnis esse molestias vero ut? Totam corrupti dolore excepturi fugit dolorum aliquid. Provident blanditiis quasi expedita excepturi ipsa dicta odit, aspernatur ad quisquam illo? Dolores perspiciatis magnam nulla odio rerum tenetur
inventore fuga. Quo sed eius sapiente, et eligendi blanditiis repellendus saepe! Commodi ipsa explicabo tempore. Dolor voluptas consequuntur amet vero harum nesciunt veritatis placeat? Dolorem ducimus a temporibus perspiciatis cum ipsum tempora
recusandae unde, repudiandae, nostrum esse magnam velit, consequatur debitis! Quos, ad quaerat optio cumque dolorum facere excepturi eligendi quod rerum suscipit adipisci sapiente animi? Consectetur excepturi tempora nemo libero facere pariatur
assumenda quisquam porro. In sint voluptas at maxime. Facilis eveniet voluptatem voluptas, libero saepe autem nulla sequi ducimus id quisquam quos aperiam reiciendis ipsa! Nesciunt quae, delectus laboriosam dicta nostrum dolorem inventore rerum
tempore assumenda animi numquam architecto. Ab ullam amet dolorum impedit debitis id tenetur, nesciunt, exercitationem ut natus a consequuntur harum. Modi illum assumenda earum deserunt voluptatum, non minima hic ad voluptate ullam quae maxime
expedita? Numquam rem blanditiis, ducimus commodi assumenda corrupti odit mollitia iure inventore molestiae velit quod. Itaque architecto dolores optio voluptatum porro saepe maxime, magnam, perspiciatis amet repellendus fuga eum earum voluptas?
Quasi sunt, hic consequatur non dolor dolorem, impedit perferendis autem minus labore ea maiores distinctio laudantium eaque quis optio illum voluptatem repudiandae blanditiis magni, repellat et accusamus amet! Aliquid, amet. Deserunt voluptatem
at excepturi odit maiores quas aut enim consequuntur obcaecati architecto. Fuga nulla maiores vel maxime? Totam a adipisci libero qui, dolore velit rerum optio animi voluptate facilis? Quisquam? Aperiam, quis est pariatur accusantium nulla sed
minima vel quae facilis, fugiat non qui amet velit quas beatae cupiditate eius sit possimus repellat. Mollitia incidunt magnam et enim, aut doloribus. Dignissimos, a non. Praesentium cupiditate corporis quis harum reprehenderit doloremque fugit
natus, laudantium rem, facere explicabo aut neque modi? Omnis id minima alias explicabo recusandae ut. Dolorem repellat exercitationem laudantium! Doloremque ea molestias, ratione iure fuga distinctio beatae sit eveniet similique animi excepturi
non error provident rem amet ullam tempora cum recusandae, eum velit harum? Aut quos hic corporis et. Illum quia dolore, numquam reprehenderit consequuntur officia incidunt ea voluptatum quae, ipsum labore a omnis hic sed necessitatibus impedit.
Aspernatur quo nam expedita tenetur quibusdam rerum iste ab odio illo. Autem facere fuga aliquam asperiores eius saepe, qui aut amet ratione harum alias tenetur quia, earum expedita voluptate dolor, cumque porro ex nobis eveniet distinctio blanditiis?
A voluptate eius delectus? Quasi, illum ut quibusdam vitae molestias atque a, modi adipisci similique distinctio cum at animi, aut pariatur consequuntur ad enim dolore? Sit aliquam dignissimos sunt ducimus nihil itaque non reprehenderit? Iure
error deleniti distinctio esse nam vel nulla aliquid porro consequuntur eius architecto rerum soluta quod ex dolorem at ducimus, quam odio sapiente! Unde dignissimos ratione quas dicta dolorum qui! Error dignissimos eius cupiditate, ipsam labore
illo. Eos repudiandae, beatae assumenda laboriosam minima veniam dolorum consequatur pariatur neque quidem inventore animi rerum nemo ipsa ut aliquid fuga eaque? Blanditiis, aliquid. Modi placeat nemo quos soluta suscipit? Rem necessitatibus dolorem
maiores culpa ducimus accusamus cumque sequi qui unde iste aspernatur labore officiis nisi debitis itaque blanditiis tempora, eveniet consectetur! Nesciunt, quam! Obcaecati, quis odit sint beatae reiciendis suscipit labore et eaque pariatur velit,
ut inventore! Fuga, repudiandae iste, voluptatem corrupti quibusdam error illum quas fugiat asperiores ea omnis ratione qui soluta! Dignissimos ab voluptate accusantium autem facilis architecto, illo sapiente mollitia minima praesentium recusandae
enim officia officiis unde tempore neque repudiandae perferendis tenetur suscipit eos commodi quis dolorum! Explicabo, odio beatae? Doloribus dolore asperiores eveniet, facere corporis magni aliquid, ratione ipsa minima consequuntur, quos nam
enim officiis repudiandae voluptatem. Animi assumenda, deserunt placeat labore iusto eos quisquam officiis architecto nobis explicabo. Repudiandae minima facere laboriosam itaque inventore unde non optio praesentium eligendi voluptates culpa et
corrupti aperiam tenetur incidunt reprehenderit dolorem sit quisquam, sed asperiores veritatis nam vel ipsum dicta! Non. Provident saepe ullam minus laboriosam sit nam rerum! In quidem minima reiciendis, non amet vero sed unde deleniti veritatis
mollitia voluptatem. Excepturi maiores error consequatur dolore labore reiciendis libero quisquam? Accusantium earum suscipit atque architecto dolorum itaque aliquid error asperiores neque ad rem perferendis expedita a voluptate, similique id
vero? Quidem iusto expedita ab, consectetur magni similique suscipit aperiam non. Veritatis debitis rem hic, at in deleniti dolorem architecto velit illo repudiandae, eligendi a. Obcaecati ducimus voluptate placeat nulla facere odio, id aut illo
numquam nobis expedita dolor non ab. Perferendis beatae placeat soluta, repellat dignissimos id qui impedit explicabo? Magni, fugit? Vel, reprehenderit eius dolorem quasi consequuntur vero dolorum molestias ipsum illo enim, quod neque est vitae
ratione laboriosam?
</div>
</div>
</main>
<footer class="container-fluid">
<div class="row">
<div class="col bg-info p-5"></div>
</div>
</footer>
</div>这与以下解决方案类似.
This is similar to the following solution.
到目前为止，页眉和页脚都具有流体高度.使用 height:[x] px; (如果需要固定高度的页脚).
As of now both the header and footer has fluid height. Use height: [x]px; should you need to have a fixed height footer.
这篇关于具有固定页脚和导航的Bootstrap 4全屏页面:内容不填充也不溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
