Как иметь дополнительный макет разделенного экрана в HTML/CSS?
У меня есть панель, полная плиток, которые могут быть любой длины, включая прокрутку за нижние границы области просмотра, поэтому для этого в настоящее время используется вертикальная прокрутка.
Что я хочу иметь, так это дополнительную нижнюю панель, которую можно показать или скрыть по запросу пользователя, которая всегда будет занимать нижние 25% экрана. Плитки выше должны затем сжаться до панели прокрутки НАД ней, чтобы вы могли независимо прокручивать плитки, не изменяя положение нижней панели.
Поэтому мне нужен внешний контейнер, который всегда составляет 100% высоты экрана без прокрутки.
Внутри этого мне нужна панель с прокручиваемым контентом. Если это единственная видимая панель, то она должна занимать 100% высоты внешнего контейнера, создавая иллюзию прокрутки основного экрана.
Когда нижняя панель видна, прокручиваемый контент должен занимать только первые 75% высоты экрана, а полоса прокрутки составляет только 75% высоты, чтобы отразить это. Нижние 25% — это новая панель, которую нужно исправить. Нижняя панель ТАКЖЕ должна иметь возможность независимой прокрутки. Таким образом, вы получаете две независимо прокручиваемые панели, расположенные друг над другом.
Я пытался сделать это с помощью flexbox, но мне не повезло. Может ли кто-нибудь посоветовать, что я делаю неправильно?
Скрипка ниже
https://jsfiddle.net/cdg6815s/2/
.app-container {
height: 100%;
padding: 10px;
background-color: blue;
overflow: hidden;
display: flex;
flex-direction: column;
}
.container {
height: 80%;
background-color: green;
padding: 10px;
flex: 0.8;
overflow-y: scroll;
}
.logtailContainer {
height: 20%;
background-color: red;
padding: 10px;
flex: 0.2;
overflow-y: scroll;
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Обновлено: комментарий skobaljic - это более простой способ сделать это. Я сохраняю этот ответ, так как он все еще работает.
Я предполагаю, что вы хотите что-то вроде этого:
* {
box-sizing: border-box;
}
.b {
height: 100vh;
margin: 0;
padding: 0;
}
.app-container {
height: 100vh;
padding: 10px;
background-color: blue;
overflow: hidden;
display: flex;
flex-direction: column;
}
.contentpanel {
max-height: 75vh;
background-color: green;
padding: 10px;
flex: 0 1 75vh;
overflow-y: scroll;
}
.lowerpanel {
max-height: 25vh;
background-color: red;
padding: 10px;
flex: 0 1 25vh;
overflow-y: scroll;
}<body class = "b">
<div class = "app-container">
<div class = "contentpanel">
App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App
tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br />
</div>
<div class = "lowerpanel">
Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br
/><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br />
</div>
</div>
</body>Несколько вопросов:
- Вы устанавливаете
.app-containerна 100% высоты, но какой. Вам нужно установить ссылку, поэтому необходимо установить высоту в body/html. flexсвойство является сокращенным - так что вы устанавливали flex-рост (как вы, возможно, знаете), но это соотношение к тому, на что он будет расти. Установка свойства flex-basis на высоту может быть лучшим способом.- Я изменил значения высоты на
vhединиц, чтобы использовать высоту области просмотра в качестве эталона. - Установка
max-heightдля ваших элементов вместо высоты позволяет им уменьшаться/увеличиваться, но останавливаться на определенном значении высоты.
Спасибо за совет. И последнее: нижняя панель должна быть скрыта или отображена по желанию пользователя. Я собирался использовать display none/block, но в настоящее время с этим CSS, если нижняя панель скрыта, верхняя панель заполняет только 75% высоты. Я полагаю, чтобы он заполнил весь экран, если нижней панели нет, я меняю оба 75vh на 100vh?
Как ты его переключаешь? JS?
Если вы используете flex, вы можете использовать flex:1; или flex-grow:1 в основном контейнере вместо установки фиксированного height и установить только height/min-height во втором контейнере, который можно скрыть.
чтобы заполнить окно, высота: 100vh и сброс полей для тела также эффективны здесь.
если задействованы border и padding, обратите внимание также на модель box-sizing, чтобы включить их в свой размер.
вот демонстрация с флажком для переключения скрытия/отображения для второго контейнера и box-sizing, чтобы помнить padding из .app-container для расчета высоты 100vh.
body {
margin: 0;
}
.app-container {
height: 100vh;
padding: 10px;
background-color: blue;
overflow: hidden;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.contentpanel {
background-color: green;
padding: 10px;
flex: 1;
overflow-y: scroll;
}
.lowerpanel {
height: 20%;
background-color: red;
padding: 10px;
min-height: 4em;
overflow-y: scroll;
}
/* demo purpose CSS to use input/label to toggle display of lowerpanel */
#hide {
position: absolute;
right: 100vw;
}
[for = "hide"] {
cursor: pointer;
background: #bee;
border: 1px solid;
border-radius: 5px;
padding: 0.25em;
display: block;
width: max-content;
margin: auto;
}
#hide:checked~.lowerpanel {
display: none;
}<div class = "app-container">
<input type = "checkbox" id = "hide"><!-- input for demo purpose -->
<div class = "contentpanel">
<label for = "hide">toggle red container</label><!-- label for demo purpose -->
App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles
<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br />
</div>
<div class = "lowerpanel">
Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br
/><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br />
</div>
</div
Просто добавьте
body, html {height: 100%; margin: 0;}и, возможно,* {box-sizing: border-box;}- проверьте здесь