Flexbox Layout (обтекание строк) на странице 100vh с прокручиваемой внутренней панелью - PullRequest
Новая
       20

Flexbox Layout (обтекание строк) на странице 100vh с прокручиваемой внутренней панелью

0 голосов
/ 05 октября 2019

У меня проблема с моей страницей. Я пытаюсь создать страницу 100vh, и она, кажется, работает нормально. Но затем у меня была страница, которая была слишком высокой для отображения, и появилась полоса прокрутки. Однако: я бы хотел, чтобы основная часть страницы была прокручиваемой (если необходимо), а остальная часть исправлена. Я подготовил следующий фрагмент кода с моим кодом: 

html {
font-family: sans-serif;
font-size: 0.5rem;
}

* {
box-sizing: border-box;
padding: 0;
border: 0;
margin: 0;
}

html * {
/* debugging */
border: 1px dotted hotpink;
}

header, footer {
text-align: center;
background-color: hotpink;
}

body {
display: flex;
flex-flow: column nowrap;
height: 100vh;
}

body>div {
flex: 1 1 auto;
display: flex;
flex-flow: row wrap;
}

nav {
background-color: lightblue;
width: 10%;
}

nav ul {
display: flex;
flex-flow: column nowrap;
list-style-type: none;
}

nav ul li:hover {
background-color: royalblue;
}

nav ul li a {
display: block;
text-decoration: none;
padding: 0.5em;
text-align: center;
}

main {
flex: 1 1 auto;
width: 75%;
}

aside {
width: 15%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<header>
  <h1>THIS IS A VERY LONG TITLE</h1>
</header>
<div>
  <nav>
    <ul>
      <li><a href="/index.gohtml">index</a></li>
      <li><a href="/post.gohtml">post</a></li>
    </ul>
  </nav>
  <main>
    <table>
        <thead>
            <th>ID</th>
            <th>NAME</th>
            <th>PRICES</th>
        </thead>
        <tbody>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
            <tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
        </tbody>
    </table>
  </main>
  <aside>aside</aside>
</div>
<footer>(c) by me</footer>
</body>
</html>

Можете ли вы помочь мне сделать всю страницу не прокручиваемой, а главный элемент прокручиваемым при необходимости? Я пробовал несколько вещей и некоторое время пользовался Google, но все, что я нашел, это решения с гибким потоком на основе столбцов, а не на основе строк. Есть ли способ получить то, что я хочу?

При удалении некоторых строк таблицы вы можете увидеть намеченный макет.

Редактировать: я забыл упомянуть, что хотел бы избежать установки фиксированнойвысота по основному компоненту. Я попробовал это, и это сработало, но я хочу, чтобы основной компонент был гибким при изменении размера окна.

1 Ответ

0 голосов
/ 05 октября 2019

Вы можете использовать flexbox для основного макета в сочетании с overflow, чтобы создать полный макет без необходимости знать размеры. Вместо использования переноса строк необходимо установить flex-direction на column, а затем расположить элементы сверху и снизу. 

body {
  height: 100vh;
  margin:0;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
}

header, footer {
  padding: 20px;
  background: #dadada;
}
.main {
  flex:8;
  overflow-y: auto;
  padding: 20px;
}
.spacer {
  padding-top: 50px;
 }
  <header>Some Header Stuff</header>
  <div class="main">
    <p>All the stuff in the middle. Using overflowY will make this scroll if the content is too big. Coloring of the header/footer/main is just to show the sections.</p>
    <p class="spacer">spacer</p>
    <p class="spacer">spacer</p>
    <p class="spacer">spacer</p>
    <p class="spacer">spacer</p>
    <p class="spacer">spacer</p>
    <p class="spacer">spacer</p>
    <p class="spacer">spacer</p>
  </div>
  <footer>Some Footer Stuff</footer>

Если вы хотите макет из трех столбцов внутри основного, просто повторите приведенный выше макет, но со столбцом. 

body {
  height: 100vh;
  margin:0;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
}

header, footer {
  padding: 20px;
  background: #dadada;
}
    
.main {
  flex:8;
  display:flex;
  justify-content: space-between;
  overflow:hidden;
}
    
aside {
  padding: 20px;
  background: #eee;
  height: 100%;
}

section {
  flex:8;
  overflow-y: auto;
  padding: 20px;
  height: 100%;
}
    
.spacer {
  padding-top: 50px;
}
<header>Some Header Stuff</header>
  <div class="main">
    <aside>sidebar</aside>
    <section>
      <p>All the stuff in the middle. Using overflowY will make this scroll if the content is too big. Coloring of the header/footer/main is just to show the sections.</p>
        <p class="spacer">spacer</p>
        <p class="spacer">spacer</p>
        <p class="spacer">spacer</p>
        <p class="spacer">spacer</p>
        <p class="spacer">spacer</p>
        <p class="spacer">spacer</p>
        <p class="spacer">spacer</p>
    </section>
    <aside>sidebar</aside>
  </div>
<footer>Some Footer Stuff</footer>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...