Используйте Bulma, чтобы сделать div в середине, заполняет оставшееся пространство и прокручивать - PullRequest
Новая
       12

Используйте Bulma, чтобы сделать div в середине, заполняет оставшееся пространство и прокручивать

0 голосов
/ 07 сентября 2018

Я начал использовать Bulma 0.7.1.

Теперь я пытаюсь разработать шаблон, который напоминает IDE, то есть с фиксированными панелями навигации, боковыми и нижними колонтитулами ипрокручиваемый в середине.У меня есть некоторые проблемы при создании контейнера, который должен заполнить видимое пространство и прокрутить при необходимости.

Я пытался применить пользовательский класс CSS 

.vscrollable {
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

к контейнерам, которые должны прокручиваться

Я сделал это в Codepenи сообщили здесь для простоты.Часть HTML: 

<section class="section">
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-start">
       <a class="navbar-item">Home</a>
       <a class="navbar-item">Bla1</a>
       <a class="navbar-item">Bla2</a>
    </div>
  </nav>
</section>
<div class="columns">
  <aside class="column is-3 has-background-warning">
    <div class="panel vscrollable">
       I have some special content that
  Very special. I should be scrollable vertically
  and horizontallyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
      <h1>bla</h1>
      <h1>bla</h1>
      <h1>bla</h1>
      <h1>bla</h1>
      <h1>bla</h1>
    </div>          
  </aside>
  <section class="column">
  <!-- This will contain another navbar and the scrollable container -->
      <nav class="navbar has-background-link">
        <div class="navbar-start">
           <a class="navbar-item">Yet another link</a>
           <a class="navbar-item">And another</a>
           <a class="navbar-item">And another one</a>
        </div>
      </nav>
      <section class="section">
        <div class="container vscrollable">
          <p>This should be scrollable vertically and horizontally and fill the available space</p>
                <h1>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablaneverendingtextblablablablablabla</h1>
                <h1>bla</h1>
                <h1>bla</h1>
                <h1>bla</h1>
                <h1>bla</h1>
        </div>          
      </section>  
  </section>
</div>
<footer class="footer has-background-danger">
  <div class="content has-text-centered">
    <p>
      This is a footer. it contains nice stuff
    </p>
  </div>
</footer>

Я хотел бы найти решение, основанное на классах Bulma css, но также подойдет и пользовательское решение, основанное на css3 или менее.

...