即使尺寸固定+奇怪的行为，页脚也会缩小 [英] Footer shrinks even if size is fixed + strange behaviour
本文介绍了即使尺寸固定+奇怪的行为，页脚也会缩小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在构建一个带有固定导航栏和页脚(用于日志信息)的页面.如果需要，内容和页脚都可以滚动.感谢一些思想家和所有回答了我上一个问题的人，我设法在问题的末尾(使用Bootstrap 4和jQuery)创建了代码.
I am building a page with fixed Navigation bar and Footer (for log information). Both the content and the Footer can scroll if needed. Thanks to some thinkering and all who answered my previous question I managed to create the code at the end of the question (with Bootstrap 4 and jQuery).
我看到的问题是，如果我手动调整文本区域的大小，则页脚仍会缩小.我希望滚动条出现在主要内容上，但页脚不会缩小.
The problem I see is that the footer still shrinks if I resize the textarea by hand. I'd expect to see a scrollbar appear on the main content, but not the footer to shrink.
我还在主要内容上添加了几行，并注意到它溢出了(文本超出了米色部分.如果我调整textarea的大小，它会回到内部(也就是说，文本再次具有米色背景).
I've also added a couple of lines on the main content and noticed that it overflows (the text goes out the beige part. If I resize the textarea it goes back inside (that is, the text has the beige background again).
我在做什么错了?
JFiddle在这里: Fiddle
JFiddle here: Fiddle
See previous question here:enter link description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
body,
html {
height: 100%;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
footer {
background: lightgreen;
height: 100px;
}
textarea {
height: calc(100% - 147px);
}
</style>
</head>
<body>
<div class="d-flex flex-column h-100">
<header class="container-fluid">
<div class="row">
<div class="col-12 p-0 bg-primary">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tools
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item dropdown-item-template" href="/">Editor</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<main class="container-fluid flex-grow-1 overflow-hidden">
<div class="row h-100 overflow-auto">
<div class="col">
<div class="row h-100">
<div class="col-10 d-flex flex-column" style="background-color: bisque;">
<div class="row">
Execute external commands:<br />
<button id="testbtn" class="btn btn-primary">TEST</button>
<button id="btnclear" class="btn btn-primary">Clear Console</button>
</div>
<div class="row flex-grow-1" style="background-color: beige;">
<textarea class="w-100">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?</textarea>
ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />
</div>
</div>
<div class="col-2">
<div class="row">
<li>
<ul>aa</ul>>
<ul>aa</ul>>
</li>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid overflow-auto">
<div class="row">
<div id="data" class="col p-1">test<br/>to<br/> fill<br/> the<br/> console<br/> log<br/></div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"
integrity="sha512-8vfyGnaOX2EeMypNMptU+MwwK206Jk1I/tMQV4NkhOz+W8glENoMhGyU6n/6VgQUhQcJH8NqQgHhMtZjJJBv3A=="
crossorigin="anonymous"></script>
</body>
</html>
推荐答案
如果您调整一个flex元素的大小，其他元素也将调整大小.为了防止调整页脚的大小，请添加类"flex-shrink-0".和"flex-grow-0"并将页脚的flex-basis设置为100px.
If you resize one flex element, the others also resizes. To prevent resizing the footer add the classes "flex-shrink-0" and "flex-grow-0" and set the flex-basis of the footer to 100px.
<footer class="container-fluid overflow-auto flex-shrink-0 flex-grow-0">
footer {
background: lightgreen;
height: 100px;
flex-basis: 100px;
}
要使溢出的部分变成米色，您可以替换
to make the overflowing part beige you can replace
<div class="col-10 d-flex flex-column" style="background-color: bisque;">
和
<div class="row flex-grow-1" style="background-color: beige;">
使用
<div class="col-10 d-flex flex-column" style="background-color: bisque; position: absolute;">
和
<div class="row flex-grow-1" style="background-color: beige; position: relative;">
这篇关于即使尺寸固定+奇怪的行为，页脚也会缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
