Уменьшить боковую панель Flexbox до высоты содержимого
У меня есть макет, в котором иногда боковая панель может быть значительно выше тела страницы. Когда он превышает высоту экрана, боковая панель продолжает расширяться по вертикали.
Мой код выглядит примерно так:
<div class = "fb-col">
<!-- Headers, etc. -->
<div class = "fb-row">
<div class = "sidebar">
<!-- Lots of content -->
</div>
<div class = "main">
<!-- Less content -->
</div>
</div>
<!-- Footers -->
</div>
со следующим CSS:
.fb-col {
height: 100%;
display: flex;
flex-direction: column;
}
.fb-row {
flex-grow: 1;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.sidebar {
width: 25%;
flex-grow: 0;
}
.main {
flex-grow: 1;
}
Это приводит к тому, что два элемента не растут по вертикали (поэтому основной не становится слишком высоким), но я не могу заставить боковую панель ограничивать ее высоту высотой документа, когда содержимое слишком короткое.
Это выглядит примерно правильно. Будет ли увеличиваться боковая панель, если тело больше боковой панели?
Ох. @HiddenHobbes, почти идеально. Есть ли способ сделать так, чтобы высота боковой панели соответствовала родительскому гибкому полю? Установка 100vh заставляет его прокручиваться при добавлении верхнего и нижнего колонтитулов.
Не могли бы вы привести пример @Bottersnike? Вам трудно представить себе вашу проблему.
@HiddenHobbes i.imgur.com/DWPnub0.png показывает это. Обычно боковая панель должна обрезаться в нижней части кнопки «Показать больше». Если высота тела меньше одной страницы, боковая панель должна быть достаточно большой, чтобы подтолкнуть нижний колонтитул к низу.
Ответы 2
Если я понял вашу проблему, вы можете попробовать следующим образом:
.fb-col {
min-height: 100%;
display: flex;
flex-direction: column;
}
.fb-row {
flex-grow: 1;
display: flex;
flex-direction: row;
min-height: 100%;
}
.sidebar {
width: 25%;
flex-grow: 0;
min-height: 100%;
}
.main {
flex-grow: 1;
min-height: 100%;
}
Таким образом, .sidebar и .main всегда будут иметь одинаковую высоту с минимальной высотой 100%.
Если не получается добавить, попробуйте добавить это правило:
html, body {
height: 100%;
margin: 0;
}
Проблема, с которой я столкнулся, заключается в попытке уменьшить сокращаться боковой панели до 100% вместо того, чтобы увеличивать ее до 100%.
поэтому замените min-height: 100% на height: 100% в классе боковой панели и добавьте overflow: auto. Он должен работать.
Если я понимаю вашу цель, я не верю, что flexbox (или любой CSS) может решить эту проблему - без применения абсолютных размеров; flexbox можно использовать для увеличения размера элемента (ов) меньше, но не наоборот.
flex-gorw и flex-shrink определяют размер элементов на основе главная ось - для flex-direction: row это горизонтальный.
Единственное решение, которое я могу придумать, - использовать JS / jQuery:
$(document).ready(function() {
$(".sidebar").height($(".main").height());
});.fb-col {
display: flex;
flex-direction: column;
}
.fb-row {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.sidebar {
min-width: 25%;
width: 25%;
overflow: auto;
}
.main {
}
/* For illustrative purposes */
.fb-row {
background-color: #FDD;
}
.sidebar {
background-color: #DFD;
}
.main {
background-color: #DDF;
}<div class = "fb-col">
<header><h1>Header</h1></header>
<div class = "fb-row">
<div class = "sidebar">
<h2>Sidebar</h2>
<nav>
<ul>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
</ul>
<ul>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
</ul>
<ul>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
<li><a href = "#">Link</a></li>
</ul>
</nav>
</div>
<div class = "main">
<h2>Content</h2>
<p>Bacon ipsum dolor amet strip steak pork chop porchetta spare ribs ribeye biltong salami tongue. Sirloin ham ball tip, tongue filet mignon cow kielbasa hamburger doner chicken. Pancetta bresaola chuck corned beef hamburger, tenderloin leberkas swine buffalo beef ribs. Filet mignon ball tip t-bone ground round beef ribs. Biltong burgdoggen venison tail hamburger spare ribs buffalo flank meatball tri-tip leberkas.</p>
<p>Ribeye porchetta kevin, pork sausage strip steak ham chicken pork chop buffalo ground round t-bone cupim pork belly. Fatback flank prosciutto kevin pork chop, pork loin pig. T-bone landjaeger ball tip fatback, shank ribeye picanha pork ground round filet mignon meatball tri-tip jowl. Shoulder meatloaf pork loin meatball ball tip, hamburger kielbasa. Andouille strip steak alcatra ham hock chuck. Cupim chicken buffalo, picanha biltong landjaeger t-bone. Jowl sirloin meatloaf short ribs tongue ground round bacon chuck fatback meatball hamburger picanha turkey kevin pork.</p>
</div>
</div>
<footer><h2>Footer</h2><small>legal and stuff</small></footer>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Вы ищете что-то подобное? jsfiddle.net/x2L4f1zt/1