크기가 고정 되어도 바닥 글이 축소됨 이상 동작 +
Aug 17 2020
1은 고정 된 탐색 표시 줄과 바닥 글 (로그 정보 용)이있는 페이지를 만들고 있습니다. 필요한 경우 내용과 발을 모두 스크롤 할 수 있습니다. 약간의 생각과 이전 질문 1에 답한 모든 사람들 덕분에 질문 끝에 코드를 만들 수있었습니다 (Bootstrap 4 및 Photoshop 사용).
1 문제는 손으로 텍스트 영역의 크기를 조정해도 발이 여전히 줄어든다는 것입니다. 메인 콘텐츠에 스크롤바가 나타날 것으로 예상하지만 발이 줄어들지는 않습니다.
1은 또한 메인 콘텐츠에 몇 줄을 추가했고 넘쳐나는 것을 발견했습니다 (텍스트가 베이지 색 부분으로 나갑니다. 텍스트 영역 안으로 다시 들어가면 크기 조정 1 (즉, 텍스트가 다시 베이지 색 배경을 가짐)).
1 무엇이 잘못 되었습니까?
JFiddle : Fiddle
여기에서 이전 질문보기 : 여기 에 링크 설명 입력
<!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/[email protected]/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>
답변
2 untbu Aug 17 2020 at 10:51
하나의 플렉스 요소의 크기를 조정하면 다른 요소도 크기가 조정됩니다. 바닥 글 크기를 조정하지 않으려면 "Flex-shrink-0"및 "flex-grow-0"클래스를 추가하고 발의 바닥을 flex-100px로 설정합니다.
<footer class="container-fluid overflow-auto flex-shrink-0 flex-grow-0">
footer {
background: lightgreen;
height: 100px;
flex-basis: 100px;
}
넘쳐나는 부분은 베이지 색으로
<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;">
1 Tawsif Aug 17 2020 at 10:45
footer {
background: lightgreen;
min-height: 4rem;
max-height: 4rem;
}
잘 작동합니다 :)