CSS макет, верхний и нижний колонтитулы, 2 столбца, фиксированная высота 100% - без вертикальной прокрутки окна на компьютере (дизайнер GUI макет) - PullRequest
Новая
       0

CSS макет, верхний и нижний колонтитулы, 2 столбца, фиксированная высота 100% - без вертикальной прокрутки окна на компьютере (дизайнер GUI макет)

0 голосов
/ 08 февраля 2020

РЕДАКТИРОВАТЬ: Я думал, что нашел свое собственное решение на основе flex, но у него были проблемы с включением прокрутки контента в навигационной / левой части среднего ряда. Я разместил свое текущее сеточное решение, которое преодолевает это. Я отредактировал вопрос, включив в него требование прокрутки.

Я пытаюсь сделать макет «дизайнер GUI». Он должен быть применим только на компьютере и планшете - небольшие устройства будут просто непригодны.

Макет предназначен для использования в качестве инструмента дизайна веб-страницы:

  • Компьютер: [Запустите фрагмент, чтобы увидеть его по-настоящему]. Имеется заголовок полной ширины. он будет содержать информацию об элементе, над которым выполняется работа, а нижний колонтитул с дополнительной информацией о состоянии будет находиться внизу области просмотра. Средняя строка содержит столбец навигатора примерно с 30% ширины области просмотра, а справа - столбец предварительного просмотра, использующий оставшуюся ширину области просмотра. Прокрутка страниц не должна выполняться, даже если список навигации длинный, но содержимое списка навигации ДОЛЖНО иметь возможность прокрутки по вертикали. Отображение множества ссылок, например.

  • Планшет: в идеале в альбомном режиме макет должен быть таким же, как и на экране компьютера. В портретном режиме столбцы в среднем ряду должны складываться, сохраняя ту же высоту, что и до суммирования, и теперь необходимо разрешить прокрутку страниц.

Ниже приведен фрагмент моей попытки компьютерная версия.

Выпуски

  • В данный момент ширина col1 является процентной долей, а позиция col2 - той же процентной величиной, что дает четкое перекрытие.
  • Как складывать, когда мы go в меньшем окне просмотра? Я понимаю точки останова и медиазапросы - что я не могу получить, так это как взять эту жесткую фиксированную 100% высоту и перебить ее, когда потребуется.
  • В целом я чувствую, что должен использовать flexbox, но для меня это вуду!

Кто-нибудь может помочь? Я предполагаю, что это, должно быть, уже было сделано, но мои поиски в Интернете в основном обнаруживают старые взломы pre-flex или решения, которые я нашел, не предоставляют функцию стека. 

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.wrapper,
html,
body {
  height: 100vh;
  max-height: 100vh;
  margin: 0;
}

#row1 {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 10vh;
  max-height: 10vh;
}

#row2 {
  position: absolute;
  top: 10vh;
  right: 0;
  left: 0;
  min-height: 80vh;
  max-height: 80vh;
  height: 80vh;
  background-color: blue;
  vertical-align: top;
}

#row3 {
  background-color: green;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 10vh;
  max-height: 10vh;
}

#col1 {
  background-color: yellow;
  width: 20%;       
  min-height: 100%;
  max-height: 100%;
  height: 100%;
  position: absolute;
  overflow-y: hidden;
}

#col2 {
  background-color: orange;
  min-height: 100%;
  max-height: 100%;
  height: 100%;
  position: absolute;
  width: 80%;
  left: 20%;  /* This is an issue as it is a problem for correct positioning */
}

#content1 {
  height: 100%;
  max-height: 100%;
  background-color: silver;
  height: 100%;
}

#contentInner {
  height: 100%;
  max-height: 100%;
  min-height: 100%;
  overflow-y: scroll;
}
<div class="wrapper">
  <div id="row1">Header</div>
  <div id="row2">
    <div id="col1">
      <div id='content1'>
        <div id="contentInner">

          Amet nostrud amet adipisicing eu enim voluptate ipsum consequat occaecat consequat mollit tempor ut nisi. Amet aute eu ex pariatur esse in. Cillum aute aute in cillum incididunt aute dolor excepteur Lorem. Velit in incididunt nostrud magna consectetur
          deserunt exercitation ea. Cupidatat aliquip qui duis irure laborum ex laborum qui nulla qui adipisicing occaecat elit. Mollit qui mollit occaecat ex aliquip est. Excepteur consequat magna elit veniam dolor dolor mollit incididunt culpa cillum
          velit aliqua. Quis Lorem fugiat consectetur nostrud eiusmod. Eiusmod culpa excepteur nisi id qui laboris proident eu enim officia laboris deserunt laboris non. Pariatur nisi est fugiat sunt.

        </div>

      </div>

    </div>

    <div id="col2">col2</div>
    <div id="col3">col3</div>
  </div>
  <div id="row3">Footer</div>
</div>

Ответы [ 3 ]

0 голосов
/ 08 февраля 2020

Вот мой собственный ответ на основе flexbox, разработанный после еще нескольких исследований.

Я разместил фрагмент кода ниже, но изменить размер экрана в версии в этой скрипке легче, .

Я застрял на навигационной панели прокрутки в левой руке. средний столбец, который, казалось, не подчинялся обычным правилам установки max-height = 100% с помощью overflow-y = auto / scroll. Последним прорывом стала эта статья , которая решила для меня проблему переполнения страницы столбцом навигации и выталкивания нижнего колонтитула из поля зрения. [Хитрость заключается в том, чтобы переполнение = скрытое в родительском элементе flex!].

Я переписал макет, используя два гибких решения. Сгиб-оболочка дает три строки, а сгиб основной страницы дает столбцы в среднем ряду.

Чтобы получить подход с использованием небольшого стека, медиа-запрос используется для:

  • удвоения высоты оболочки со 100vh (100% вертикальной высоты области просмотра) до 200vh,
  • включить функцию стека в главной строке страницы
  • сделать столбцы в этой строке шириной 100% для запуска переноса
  • сделать столбцы в этой строке 50% высота, поэтому они фактически остаются такими же, как и раньше.

Важно: запустите полную страницу фрагмента, затем F12 и измените размер страницы, чтобы увидеть точку останова на ширине 750 пикселей. 

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.wrapper,
html,
body {
  height: 100vh;
  max-height: 100vh;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;     /* Changes in media query to double this */
  max-height: 100vh;
}

.page-main {
  flex-grow: 1;   /* can grow as big as needed */
  overflow: hidden;  /* The magic dust that is needed to make it scroll - see http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout */
}

.page-header {
  background-color: PaleGreen;
}

.page-footer {
  background-color: MediumSpringGreen;
}

.page-content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}


#col1 {
  background-color: MediumSeaGreen;
  width: 30%;
}

#col2 {
  background-color: ForestGreen;
  flex-grow: 1;
}

#content {
  height: 100%;
  max-height: 100%;
  background-color: silver;
}

#contentInner {
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
}

/* When we hit the small width breakpoint, double the height of the wrapper to 2 x vp height, 
make the page content flex wrap, and make the page content columns 100% width to force the wrap. Also
noe make the  page content columns 40% height to retain their original height now the patent is double height. 
*/
@media screen and (max-width: 750px) {
  .wrapper {
    min-height: 200vh;
    max-height: 200vh;
  }
  .page-content {
     flex-wrap: wrap; 
  }
  #col1 {
    width: 100%;
    height: 50%;
  }
 #col2 {
    width: 100%;
    height: 50%;
  }
}
<div class="wrapper">
  <header class="page-header">
    This is the top line
  </header>
  <main class="page-main">
    <div class='page-content'>
      <div id='col1' class='col'>


        <div id='content'>
          <div id="contentInner">
            <ul>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>              
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
            </ul>
          </div>

        </div>
      </div>
      <div id='col2' class='col'>
        Preview content
      </div>
    </div>

  </main>
  <footer class="page-footer">
    This is the footer
  </footer>
</div>

Важно: запустите полную страницу фрагмента, затем F12 и измените размер страницы, чтобы увидеть точку останова на ширине 750 пикселей.

0 голосов
/ 10 февраля 2020

Вот мой собственный ответ, использующий сетку вместо flex box.

Мне было предложено сделать это из-за возникающей проблемы с подходом flexbox. В левой / навигационной секции мне нужно было прокрутить содержимое. Пробуйте, как я мог, я никогда не смог бы этого достичь - хотя это «возможно» было связано с использованием Fomanti c -UI для содержимого, поскольку FUI ​​имеет довольно строгий и самоуверенный характер CSS.

См. Пример здесь для удобства: https://jsfiddle.net/VanquishedWombat/9L57j8so/19/

В целом подход сетки имел для меня больше смысла и, казалось, включал меньше черных магов c. В решении используются две сетки: внешняя дает верхний колонтитул, средний и нижний колонтитул, затем средняя содержит вторую сетку, которая дает два раздела. Медиа-запрос обновляет внутреннюю сетку и позиции ячеек. 

// Note the JS is just for fun and not important to the grid CSS layout!

var cnt = 0;

$(document).ready(function() {


  $('body').on('click', '#cull', function() {

    $('.wrapper li').each(function() {
      cnt = cnt + 1;
      if (cnt > 5) {
        $(this).remove();
      }
    })
  })

  $('body').on('click', '#add', function() {

    for (var i = 0; i < 10; i = i + 1) {
      $('ul').append($("<li>Menu Entry</li>"))
    }

  })

});
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.wrapper,
html,
body {
  height: 100vh;
  max-height: 100vh;
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px auto 20px;
  overflow: hidden;
  min-height: 100vh;
  /* Changes in media query to double this */
  max-height: 100vh;
}

.page-main {
  flex-grow: 1;
  /* can grow as big as needed */
  overflow: hidden;
  /* The magic dust that is needed to make it scroll - see http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout */
}

.page-header {
  background-color: PaleGreen;
  grid-column: 1 / span 1;
  grid-row: 1 / 1;
}

.page-footer {
  background-color: MediumSpringGreen;
  grid-column: 1 / span 1;
  grid-row: 3 / 3;
}

.page-content {
  height: 100%;
  grid-column: 1 / span 1;
  grid-row: 2 / 2;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
}

#col1 {
  background-color: MediumSeaGreen;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  overflow: hidden;
  height: 100%;
}

#col2 {
  background-color: ForestGreen;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
}

#content {
  max-height: 100%;
  background-color: silver;
  overflow: hidden;
  height: 100%;
}

#contentInner {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  background-color: lime;
  border: 1px dotted red;
}


/* When we hit the small width breakpoint, double the height of the wrapper to 2 x vp height, 
make the page content flex wrap, and make the page content columns 100% width to force the wrap. Also
noe make the  page content columns 40% height to retain their original height now the patent is double height. 
*/

@media screen and (max-width: 750px) {
  .wrapper {
    min-height: 200vh;
    max-height: 200vh;
  }
  .page-content {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  #col1 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
  }
  #col2 {
    background-color: ForestGreen;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 2;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <header class="page-header">
    This is the top line fixed at 50px height.
  </header>
  <main class="page-main">
    <div class='page-content'>
      <div id='col1' class='col'>


        <div id='content'>
          <div id="contentInner">
            <button id='cull'>
          Click to cull some menu entries - border should not shrink</button>
            <ul>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
              <li>Menu Entry</li>
            </ul>
            <button id='add'>
          Click to add 10 more menu entries - should enable scroll</button>

          </div>

        </div>
      </div>
      <div id='col2' class='col'>
        Preview content
      </div>
    </div>

  </main>
  <footer class="page-footer">
    This is the footer fixed at 20px height
  </footer>
</div>
0 голосов
/ 08 февраля 2020

вы можете взглянуть на flex box и min-width, чтобы установить точку останова.

пример: 

* {
  margin: 0;
  box-sizing: border-box;
}
div {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  min-height: 0;
  overflow:auto;
}
aside {
  min-width: 200px;
  flex: 1;
}
aside,
section {
  max-height:100%;
  overflow: auto;
}
section {
  min-width: 300px;
  flex: 3;
}
header,
footer {
  background: lightblue;
  padding: 0.25em;
}
main {
  background: salmon;
}
section {
  background: lightgreen;
}
<div>
  <header> header any height 
  <p> run me in full page to test behavior on resize</header>
  <main>
    <aside> aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>aside content <br>End  </aside>
    <section> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> wider content <br> End </section>
  </main>
  <footer> footer any height</footer>
</div>

учебник / напоминание: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...